Компоненты Компоненты визуализации данных Компонент визуализации данных

Компонент визуализации данных

Адаптивный компонент визуализации данных, разработанный в стиле Material Design с пастельной цветовой гаммой, подходит для демонстрации работы портфолио с поддержкой темного режима.

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

HTML-код

<div class="max-w-4xl mx-auto p-4">
    <h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It's visually appealing and user-friendly.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/201" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It focuses on usability and design.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/202" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Created with attention to detail.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/203" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Designed with modern aesthetics.</p>
            </div>
        </div>
    </div>
</div>

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

Компоненты визуализации данных

Компонент визуализации данных в стиле ретро/винтаж с поддержкой темных тем и отзывчивыми эффектами с использованием Tailwind CSS.

Открытый

Компоненты визуализации данных

Простой, отзывчивый компонент визуализации данных электронной коммерции со стилем дизайна glassmorphism и монохроматической цветовой схемой, с поддержкой темного режима.

Открытый

Компонент компонентов визуализации данных

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

Открытый