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

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

Адаптивный компонент визуализации данных, разработанный в стиле 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>

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

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

Веб-компонент для визуализации данных в стиле Material Design с Tailwind CSS, с адаптивными макетами, поддержкой темных тем и изображениями-заполнителями.

Открытый

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

Компонент визуализации данных, разработанный в стиле Brutalist с использованием Tailwind CSS, с адаптивными макетами и поддержкой темных тем.

Открытый

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

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

Открытый