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

Компонент временной шкалы стекломорфизма

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

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

HTML-код

<div class="bg-gray-50 dark:bg-gray-900 flex justify-center py-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl w-full backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Timeline</h2>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 1</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 1</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 1.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 2</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 2</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 2.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 3</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 3</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 3.</p>
                </div>
            </div>
        </div>
    </div>
</div>

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

Playful_Music_Timeline_Component

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

Открытый

Компонент временной шкалы социальных сетей

Простой, адаптивный компонент временной шкалы для социальных сетей, разработанный в соответствии с принципами Material Design. Он использует земляные тона и включает поддержку темного режима. Каждый элемент временной шкалы отображает аватар пользователя, имя, заголовок записи и изображение-заполнитель, типичные для лент социальных сетей.

Открытый

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

Отзывчивый компонент временной шкалы для панелей мониторинга, с микровзаимодействиями и пастельной цветовой схемой, с поддержкой темных тем. Он использует Tailwind CSS для стилизации и включает в себя изображения-заполнители из picsum.photos и аватары из randomuser.me.

Открытый