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

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

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

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

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>

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

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

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

Открытый

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

Компонент временной шкалы Minimalist/Flat Design для демонстрации работ или продуктов в портфолио, разработанный с поддержкой отзывчивости и темного режима с использованием Tailwind CSS.

Открытый

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

Отзывчивый компонент временной шкалы с поддержкой темного режима и микровзаимодействий с использованием Tailwind CSS. JavaScript не требуется.

Открытый