---
# System prepended metadata

title: ダムカードのデザイン

---

# ダムカードのデザイン

* デザイン案として出してみた。
* CSSフレームワークは[TailWind.css](https://tailwindcss.com/docs/installation)を使った。
* Codepenなどで[サンプル](https://codepen.io/search/pens?q=tailwind)が豊富なので真似しやすい。
* Bootstrapなどのフレームワークは結局cssをカスタマイズすることになりメンテが大変そう。Utilityを覚えればTailWindは使い易い印象

https://codepen.io/skojima/pen/bGGxLVO

## ベース

![](https://i.imgur.com/Ada51kx.png)

## タグ + 地図
タグと地図を付けてみる。
![](https://i.imgur.com/kEQguYW.png)

## Vue
* タグコンポーネントのコードスニペット
```javascript=
<template>
    <div class="px-6 py-4">
        <span class="tag-item" v-for="item in items" v-bind:key="item.index">{{item}}</span>
    </div>
</template>

<script>
    export default {
        name: "Tags",
        props: {
            items: Array
        }
    }
</script>

<style scoped>
    .tag-item {
        @apply inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-600 mr-2
    }

</style>
```

