製品ギャラリーコンポーネント
Glassmorphism デザイン スタイルのレスポンシブ プロダクト ギャラリー コンポーネントで、ぼかし効果とダーク テーマのサポートを備えたすりガラスのような半透明の要素が特徴です。製品画像とユーザーアバターを紹介しています。
HTMLコード
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="max-w-4xl w-full">
<h2 class="text-2xl font-bold text-center mb-6 dark:text-white">Product Gallery</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1 with details.</p>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">By John Doe</span>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2 with details.</p>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">By Jane Smith</span>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3 with details.</p>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">By Mike Johnson</span>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4 with details.</p>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">By Sarah Connor</span>
</div>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
製品ギャラリーコンポーネント
マテリアルデザインの原則に基づいて設計されたレスポンシブ製品ギャラリーコンポーネントで、アースカラーを特徴とし、ダッシュボードに適しており、ダークモードをサポートしています。
製品ギャラリーコンポーネント
微妙なマイクロインタラクション、パステルカラーの配色、完全なダークモードのサポートで設計された、複雑で応答性の高い製品ギャラリーコンポーネントで、フォーラムやコミュニティプラットフォームに適しています。インタラクティブな画像選択と詳細な製品情報を備えています。
製品ギャラリーコンポーネント
Tailwind CSS を使用したレスポンシブ製品ギャラリー コンポーネントで、Neumorphic デザイン スタイル、補色スキーム、ビジネス Web サイトに適した複雑なレイアウトを備えています。ダークモードのサポートが含まれており、picsum.photosの画像を使用します。