HTMLコード
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl font-bold text-gray-900 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Product Description</p>
</div>
<div class="flex justify-center sm:justify-start items-baseline">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$</span>
<span class="text-4xl font-bold text-gray-900 dark:text-white">19.99</span>
<span class="text-sm text-gray-600 dark:text-gray-400">/month</span>
</div>
<div class="mt-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Buy Now
</button>
</div>
</div>
</div>
</div>
関連コンポーネント
価格表示コンポーネント 22
商品の画像、名前、価格、カートに追加するボタンを表示するミニマリストの価格表示コンポーネント。Tailwind CSSを使用したレスポンシブ性とダークテーマのサポートで設計されています。
価格表示コンポーネント
レトロ/ビンテージの美学と鮮やかな色でスタイリングされたレスポンシブな価格表示コンポーネントで、ソーシャルメディアインターフェイスに適しており、ダークモードをサポートしています。
価格表示コンポーネント
補色(ソフトオレンジとライトブルー)を備えたNeumorphismスタイルの価格表示コンポーネントで、eコマースには適度な複雑さがあります。ダークテーマをサポートするレスポンシブデザインが特徴です。このコンポーネントには、商品画像、タイトル、価格が表示され、[カートに追加] ボタンが表示されます。ダークモードでは、彩度の低い補色が使用されます。