ギャラリー コンポーネント
ブログ/コンテンツの目的でアースカラーのNeumorphismスタイルのギャラリーコンポーネント。このコンポーネントは、複数のインタラクティブ要素、レスポンシブデザイン、およびダークテーマのサポートを備えた豊富なインターフェイスを備えています。
HTMLコード
<div class="container mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg"> <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Gallery</h1> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 1</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 2</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 3</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=4" alt="Gallery Image 4" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 4</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=5" alt="Gallery Image 5" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 5</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=6" alt="Gallery Image 6" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 6</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> </div> <div class="mt-6 text-center"> <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300">Author</h3> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="mx-auto rounded-full w-24 h-24"> <p class="text-gray-600 dark:text-gray-400">Author Name</p> </div></div>関連コンポーネント
コーポレート/プロフェッショナルギャラリーコンポーネント
フォレスト/グリーンのカラーパレットを使用した、企業/プロフェッショナルな美学を備えたレスポンシブで用途の広い画像ギャラリーコンポーネント。教育プラットフォーム向けに設計されており、ダークモードをサポートするクリーンで信頼できるインターフェイスを提供します。
JewelTone_Photography_Gallery
ジュエルトーンの色とすっきりとしたタイポグラフィレイアウトを備えた、グリッドシステムとダークモードのサポートを特徴とする、複雑でレスポンシブな写真ギャラリーコンポーネント。写真家のポートフォリオに最適です。