Components Gallery Retro Gallery Component

Retro Gallery Component

A responsive gallery component with retro/vintage style, vibrant color scheme, and simple layout for blog/content consumption, with dark mode support. Uses Tailwind CSS.

Preview

HTML Code

<div class="bg-gray-200 dark:bg-gray-800 p-6">  <div class="container mx-auto">    <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Gallery</h2>    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro1/500/300" alt="Gallery Image 1" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 1</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro2/500/300" alt="Gallery Image 2" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 2</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro3/500/300" alt="Gallery Image 3" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 3</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>    </div>  </div></div>

Related Components

Gallery Component

Responsive Gallery Component with 3D Design, Analogous Color Scheme, and Dark Mode Support for Social Media interfaces.

Open

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.

Open

E-commerce Product Gallery

A minimalist and responsive product gallery component for e-commerce, featuring ocean/blue tones, dark mode support, and interactive image display.

Open