# コピペでカード形式のコンテンツを作成する方法

<figure><img src="https://41096298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK7QYyHt2kqHHD8GYgJrQ%2Fuploads%2FEOpxFp4v7mX80bW0V5CU%2Fimage.png?alt=media&#x26;token=8fb0eb00-b27f-4aa6-8d60-caeab11812e7" alt=""><figcaption></figcaption></figure>

CS-Cart for ECモール & マーケットプレイスでは、デザインテンプレートに Tailwind を採用しています。

{% hint style="info" %}
**Tailwind CSSとは**

Tailwind CSSとは、ユーティリティファーストのCSSフレームワークです。

CSSを直接記述することなく、HTML要素にTailwindの**クラス名を追加するだけでデザインをカスタマイズ**できます。
{% endhint %}

そのため、Tailwindベースのデザインコンポーネントを配布している各種サービスから、希望するコンポーネントをコピー＆ペーストするだけで、CS-Cart上で表示することができます。

{% hint style="info" %}
**Tailwind製のコンポーネントを配布・販売しているウエブサイトの例**

[https://www.hyperui.dev/\
https://flyonui.com/\
https://flowbite.com/\
https://tailgrids.com/components](https://www.hyperui.dev/https://flyonui.com/https://flowbite.com/https://tailgrids.com/components)
{% endhint %}

この記事では、HyperUI（[https://www.hyperui.dev/](https://www.hyperui.dev/https://flyonui.com/https://flowbite.com/https://tailgrids.com/components)）で無料配布されているコンポーネントを利用して、CS-Cartのトップページにカード形式のコンテンツを表示する方法を解説します。

{% @supademo/embed demoId="cmam3q1ry09py2gbph151x7py" url="<https://app.supademo.com/demo/cmam3q1ry09py2gbph151x7py>" %}

CS-Cartでは、今回解説したカードコンポーネントだけなく、Tailwindで構成されたあらゆるコンポーネントをコピー＆ペーストするだけで表示できます。また、Tailwindのクラスを変更・追加することによりデザインを自由にカスタマイズできます。