# コピペで外部のデザインコンポーネントを表示

CS-Cart for ECモール & マーケットプレイスでは、フロントエンドのデザインに [Tailwind CSS](https://tailwindcss.com/) を採用しています。

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

Tailwind CSSは、ウェブサイトやアプリケーションのデザインを効率的に構築するためのユーティリティファーストのCSSフレームワークです。従来のCSSフレームワークとは異なり、Tailwindは事前に定義されたクラスを提供し、それらを組み合わせることでデザインを作り上げることができます。

[CS-Cart for ECモール & マーケットプレイスのデザインにTailwindを採用した理由](https://cs-cart.jp/news/why-tailwind/)
{% endhint %}

Tailwindは多くのプロジェクトで採用されており、<mark style="background-color:orange;">多種多様なデザインコンポーネントが多くのウェブサイトで無料・有料で公開</mark>されています。

{% hint style="info" %}
**Taiwindベースのデザインコンポーネントを配布しているウェブサイトの例**

* [Tailwind UI](https://tailwindcss.com/plus)
* [Meraki UI](https://merakiui.com/)
* [Flowbite](https://flowbite.com/)
* [TW Elements](https://tw-elements.com/)
* [Tailblocks](https://tailblocks.cc/)
* [Shuffle](https://shuffle.dev/)
  {% endhint %}

これらのウェブサイトで提供されているデザインコンポーネントをコピーし、文言やリンク先などを調整することにより、自身のECモールに簡単に導入することができます。

***

### 外部サービスのデザインコンポーネントをCS-Cartに導入する方法

一例として、[Meraki UI](https://merakiui.com/) で公開されている「価格表」をECモールのトップページに表示させる方法を解説します。

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