Gallery Component
A responsive gallery component using Tailwind CSS with Skeuomorphism design, Pastel color scheme, and moderate complexity for social media purposes. Includes dark mode support and uses picsum.photos for images and randomuser.me for avatars.
HTML Code
<div class="container mx-auto px-4 py-8 dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
<img src="https://picsum.photos/seed/1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user 1">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">User Name 1</p>
<p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
<img src="https://picsum.photos/seed/2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar of user 2">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">User Name 2</p>
<p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
<img src="https://picsum.photos/seed/3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar of user 3">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">User Name 3</p>
<p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
</div>
</div>
</div>
</div>
</div>
</div>Related Components
Real Estate Gallery Component
A responsive and professional gallery component for real estate listings, featuring a clean layout, pastel color scheme, and full dark mode support. Includes property cards with details, a filter/sort section, and a clear call to action.
Gallery Component
A Brutalist-style gallery component designed for blog or content consumption, featuring a responsive layout with dark theme support.