価格表示コンポーネント
補色(ソフトオレンジとライトブルー)を備えたNeumorphismスタイルの価格表示コンポーネントで、eコマースには適度な複雑さがあります。ダークテーマをサポートするレスポンシブデザインが特徴です。このコンポーネントには、商品画像、タイトル、価格が表示され、[カートに追加] ボタンが表示されます。ダークモードでは、彩度の低い補色が使用されます。
HTMLコード
<div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto transition-all duration-300">
<!-- Product Image (Placeholder) -->
<div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark overflow-hidden">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover">
</div>
<!-- Product Title -->
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Neumorphic Product Title</h3>
<!-- Product Description (Optional - Uncomment if needed) -->
<!-- <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">This is a brief description of the product, showcasing its features and benefits.</p> -->
<!-- Price and Add to Cart -->
<div class="flex items-center justify-between mb-4">
<span class="text-3xl font-bold text-orange-600 dark:text-orange-400">$129.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark active:shadow-inner-neumorphic-btn-light dark:active:shadow-inner-neumorphic-btn-dark transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Add to Cart
</button>
</div>
<!-- Additional Details (Optional) -->
<div class="grid grid-cols-2 gap-3 text-sm text-gray-700 dark:text-gray-300">
<div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<p><strong class="text-gray-800 dark:text-gray-200">Category:</strong> Electronics</p>
</div>
<div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<p><strong class="text-gray-800 dark:text-gray-200">Availability:</strong> In Stock</p>
</div>
</div>
</div>
<!-- TailwindCSS Config for Neumorphism Shadows (Add this to your tailwind.config.js) -->
<div style="display: none;">
<!-- You would typically add this to your tailwind.config.js file under 'extend' -->
<pre>
module.exports = {
theme: {
extend: {
boxShadow: {
'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #1a1a1a',
'inner-neumorphic-light': 'inset 5px 5px 10px #bdbdbd, inset -5px -5px 10px #ffffff',
'inner-neumorphic-dark': 'inset 5px 5px 10px #333333, inset -5px -5px 10px #6d6d6d',
'neumorphic-btn-light': '6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff',
'neumorphic-btn-dark': '6px 6px 12px #444444, -6px -6px 12px #222222',
'inner-neumorphic-btn-light': 'inset 3px 3px 6px #8c8c8c, inset -3px -3px 6px #ffffff',
'inner-neumorphic-btn-dark': 'inset 3px 3px 6px #3b3b3b, inset -3px -3px 6px #5f5f5f',
}
}
}
}
</pre>
</div>
</div>