Компоненты Галерея Компонент галереи

Компонент галереи

Адаптивный компонент галереи с микровзаимодействиями для социальных сетей, разработанный с темной темой и простой версткой с использованием Tailwind CSS.

Предварительный просмотр

HTML-код

<div class="container mx-auto p-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Gallery image 1" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-blue-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">John Doe</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/201?random=2" alt="Gallery image 2" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Jane Smith</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/202?random=3" alt="Gallery image 3" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Michael Johnson</span>
                </div>
            </div>
        </div>
        <!-- Repeat as necessary for more images -->
    </div>
</div>

Связанные компоненты

Компонент "Галерея недвижимости"

Отзывчивый и профессиональный компонент галереи для объявлений о недвижимости, отличающийся чистым макетом, пастельной цветовой гаммой и полной поддержкой темного режима. Включает карточки объектов с подробной информацией, раздел фильтрации/сортировки и четкий призыв к действию.

Открытый

Скевоморфная криптогалерея

Сложный скевоморфный компонент галереи, разработанный для криптовалют и блокчейн-приложений, отличающийся дополнительными цветами, отзывчивостью и поддержкой темного режима. Он имитирует элементы реального мира, такие как утопленные кнопки и тисненые рамки.

Открытый

Компонент ретро-галереи

Адаптивный компонент галереи в стиле ретро/винтаж, яркой цветовой гаммой и простым макетом для просмотра блога/контента с поддержкой темного режима. Использует CSS Tailwind.

Открытый