ギャラリー コンポーネント
3D デザインスタイルのレスポンシブギャラリーコンポーネントで、シャドウとホバーエフェクトによる奥行きとエンゲージメントが特徴です。ダークテーマとライトテーマをサポートしています。
HTMLコード
<div class="max-w-7xl mx-auto p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=1" alt="Gallery Item 1" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 1</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=2" alt="Gallery Item 2" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 2</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=3" alt="Gallery Item 3" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 3</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=4" alt="Gallery Item 4" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 4</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=5" alt="Gallery Item 5" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 5</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=6" alt="Gallery Item 6" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 6</span>
</div>
</div>
</div>
</div>
<style>
.dark { background-color: #1a202c; }
.dark .text-gray-900 { color: white; }
</style>関連コンポーネント
ギャラリー コンポーネント
ビジネス/企業のWebサイト向けに設計されたシンプルでレスポンシブな画像ギャラリーコンポーネントで、マテリアルデザインの原則に触発されたトライアドカラースキームが特徴です。ユーザーの好みに合わせてダークテーマが含まれており、グリッドベースのレイアウトを使用しています。
レトロギャラリーコンポーネント
レトロ/ビンテージスタイル、鮮やかな配色、ブログ/コンテンツ消費用のシンプルなレイアウトを備えたレスポンシブギャラリーコンポーネントで、ダークモードがサポートされています。Tailwind CSSを使用します。