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

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

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

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

HTML-код

<div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 py-10">
    <div class="relative w-full max-w-4xl">
        <div class="border-l-4 border-indigo-600 dark:border-indigo-300">
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 1</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=1" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 2</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=2" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 3</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=3" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

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

Открытый

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

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

Открытый

Хронология социальных сетей в оттенках серого

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

Открытый