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

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

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

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

HTML-код

<div class="max-w-4xl mx-auto p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Our Journey</h2>
    <div class="border-l-2 border-gray-300 dark:border-gray-600">
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-01-01</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Launched our first product</h3>
                <p class="text-gray-600 dark:text-gray-400">We successfully launched our first product to the market, marking a significant milestone for our company.</p>
            </div>
        </div>
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-06-15</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Expanded our services</h3>
                <p class="text-gray-600 dark:text-gray-400">We expanded our service offerings to better meet the needs of our clients and enhance our market presence.</p>
            </div>
        </div>
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-12-01</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Achieved 1000 clients</h3>
                <p class="text-gray-600 dark:text-gray-400">We reached a significant achievement of acquiring our 1000th client, showcasing our growth and success.</p>
            </div>
        </div>
    </div>
</div>

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

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

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

Открытый

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

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

Открытый

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

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

Открытый