Компоненты Компоненты отображения содержимого Компоненты отображения содержимого

Компоненты отображения содержимого

Портфолио 3D-дизайна, демонстрирующее работы или продукты с цветовой схемой в оттенках серого и адаптивным дизайном, поддерживающим темный режим.

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

HTML-код

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-10 flex flex-col items-center justify-center">
    <h1 class="text-3xl font-bold mb-5 text-gray-800 dark:text-gray-200">Portfolio</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Artwork 1">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Artwork 2">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Artwork 3">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
    </div>
    <footer class="w-full text-center mt-10 text-gray-600 dark:text-gray-400">
        <p>&copy; 2023 Your Name. All rights reserved.</p>
    </footer>
</div>

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

Ретро открытка для социальных сетей

Отзывчивая открытка для социальных сетей в стиле ретро/винтаж 80-х/90-х годов, с использованием аналогичной цветовой гаммы (Sky, Teal, Purple) с акцентами цвета фуксии. Поддерживает темный режим и интерактивные эффекты наведения. Содержимое включает в себя аватар пользователя, имя пользователя, метку времени, текстовую публикацию, изображение и кнопки действий (нравится, комментарий, обмен). Создано с помощью Tailwind CSS.

Открытый

Карточка с объявлением о продаже недвижимости - швейцарская пастель

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

Открытый

Компонент компонентов отображения содержимого

Простой, адаптивный компонент отображения контента с эффектом стекломорфизма, поддержкой темных тем и дополнительной цветовой схемой, подходящий для блогов или потребления контента.

Открытый