ギャラリー コンポーネント
ブログ/コンテンツの目的でアースカラーの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>