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

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

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

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

HTML-код

<div class="container mx-auto p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Timeline</h1>
    <div class="relative">
        <div class="border-l border-gray-300 dark:border-gray-700 ml-6">
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/1/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 1</h2>
                        <p class="text-gray-600 dark:text-gray-400">Description of the event that took place. It was a significant moment.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-02-14</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/2/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 2</h2>
                        <p class="text-gray-600 dark:text-gray-400">Another description of an important event that happened.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-03-01</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/3/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 3</h2>
                        <p class="text-gray-600 dark:text-gray-400">A brief overview of an event that marked a milestone.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-04-10</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/4/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 4</h2>
                        <p class="text-gray-600 dark:text-gray-400">Final event description summarizing the timeline.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-05-15</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

Ретро/винтажный компонент временной шкалы

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

Открытый

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

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

Открытый

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

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

Открытый