CCHub Logo CCHub Tailwind Collection
Komponenten Zeitstrahl Zeitleisten-Komponente

Zeitleisten-Komponente

Eine einfache, reaktionsschnelle Timeline-Komponente, die in einem skeuomorphen Stil mit einem Graustufen-Farbschema gestaltet ist und für Geschäfts-/Unternehmenswebsites geeignet ist. Es bietet Unterstützung für ein dunkles Theme und verwendet Tailwind CSS für das Styling.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Neumorphismus-Zeitachsen-Komponente

Eine reaktionsschnelle Timeline-Komponente, die mit Neumorphism unter Verwendung von Tailwind CSS gestaltet wurde und Unterstützung für den Dunkelmodus bietet.

Offen

Zeitleisten-Komponente

Eine responsive Timeline-Komponente mit Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde. Es zeigt eine Reihe von Ereignissen mit Datumsangaben, Titeln und Beschreibungen an, die für ein Dashboard geeignet sind.

Offen

Zeitleisten-Komponente

Responsive Timeline-Komponente mit skeuomorphem Design, analogem Farbschema, mittlerer Komplexität für Blog-/Content-Websites mit Unterstützung für Dark Theme. Kein JavaScript erforderlich, verwendet Tailwind CSS mit Unterstützung für den Dunkelmodus. Es werden Bilder von picsum.photos und Avatare von randomuser.me verwendet.

Offen