Компоненты Хронология Компонент временной шкалы

Компонент временной шкалы

Минималистичный компонент временной шкалы с плоским дизайном для демонстрации работ или продуктов в портфолио с яркими цветами и поддержкой темных тем.

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

HTML-код

<div class="flex flex-col space-y-8 p-8 bg-white dark:bg-gray-800">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-blue-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-blue-500 dark:text-blue-400">January 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-red-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-red-500 dark:text-red-400">March 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-green-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-green-500 dark:text-green-400">May 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-purple-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-purple-500 dark:text-purple-400">August 2022</span>
        </div>
    </div>
</div>

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

Brutalist_Sepia_Timeline_Documentation

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

Открытый

Компонент временной шкалы

Адаптивный компонент временной шкалы, разработанный в стиле брутализма с использованием Tailwind CSS, поддерживает темную тему и имеет замещающие изображения и аватары.

Открытый

Компонент временной шкалы

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

Открытый