Компонент ретро-галереи
Адаптивный компонент галереи в стиле ретро/винтаж, яркой цветовой гаммой и простым макетом для просмотра блога/контента с поддержкой темного режима. Использует CSS Tailwind.
HTML-код
<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>Связанные компоненты
Компонент галереи
Адаптивный компонент галереи со стилем 3D-дизайна, отличающийся глубиной и вовлеченностью благодаря эффектам теней и наведения. Он поддерживает темную и светлую темы.
Компонент галереи
Адаптивный компонент галереи с дизайном Glassmorphism, аналогичной цветовой схемой, сложной версткой и поддержкой темной темы для электронной коммерции.
Компонент галереи
Компонент галереи в стиле неоморфизм с земляными тонами для блогов/контента. Этот компонент отличается богатым интерфейсом с множеством интерактивных элементов, адаптивным дизайном и поддержкой темных тем.