価格表示コンポーネント 22
商品の画像、名前、価格、カートに追加するボタンを表示するミニマリストの価格表示コンポーネント。Tailwind CSSを使用したレスポンシブ性とダークテーマのサポートで設計されています。
HTMLコード
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
</div>
</div>関連コンポーネント
価格表示コンポーネント
ソーシャルメディアインターフェース用に設計された、単色の配色を備えた3Dにインスパイアされた価格表示コンポーネント。これは、ダークモードをサポートする複雑で応答性の高いコンポーネントで、Tailwind CSSを使用して構築されています。JavaScriptは含まれていません。
Neumorphic価格表示コンポーネント
Neumorphismデザインスタイルと類似の配色を備えた、複雑でレスポンシブなダークモード互換の価格表示コンポーネントで、ブログ/コンテンツの消費に適しています。トグルや詳細なティアなど、複数のインタラクティブな要素を備えています。
価格表示コンポーネント
レトロ/ヴィンテージをテーマにしたeコマース向けの価格表示コンポーネントで、トライアドカラースキームが特徴です。これは、ダークテーマをサポートする複雑でレスポンシブなデザインで、Tailwind CSSで構築されています。