3Dギャラリーコンポーネント
e コマース用に設計された複雑なレスポンシブ 3D ギャラリー コンポーネントで、ダーク テーマと補色スキームが特徴です。
HTMLコード
<div class="max-w-7xl mx-auto p-6">
<h2 class="text-3xl font-bold text-center mb-6 text-gray-900 dark:text-white">3D Gallery Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-blue-600 text-white text-sm px-2 py-1 rounded">New</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-blue-700">Add to Cart</button>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-green-600 text-white text-sm px-2 py-1 rounded">Sale</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$39.99</span>
<button class="bg-green-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-green-700">Add to Cart</button>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-red-600 text-white text-sm px-2 py-1 rounded">Featured</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
<button class="bg-red-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-red-700">Add to Cart</button>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-purple-600 text-white text-sm px-2 py-1 rounded">Exclusive</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$59.99</span>
<button class="bg-purple-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-purple-700">Add to Cart</button>
</div>
</div>
<!-- Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-orange-600 text-white text-sm px-2 py-1 rounded">Popular</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$19.99</span>
<button class="bg-orange-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-orange-700">Add to Cart</button>
</div>
</div>
<!-- Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-teal-600 text-white text-sm px-2 py-1 rounded">Limited</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$99.99</span>
<button class="bg-teal-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-teal-700">Add to Cart</button>
</div>
</div>
</div>
</div>