> For the complete documentation index, see [llms.txt](https://manual-admin.cs-cart.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual-admin.cs-cart.jp/tips/copy_paste_components.md).

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

<figure><img src="/files/JKGuOmihrPXmwX5MqaP3" 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/&#xA;https://flyonui.com/&#xA;https://flowbite.com/&#xA;https://tailgrids.com/components>)
{% endhint %}

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

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

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