CCHub Logo CCHub Tailwind Collection
Komponenten Zeitstrahl Zeitleisten-Komponente

Zeitleisten-Komponente

Eine einfache Retro-/Vintage-Timeline-Komponente, die entwickelt wurde, um Arbeiten oder Produkte mit einer nostalgischen 80er/90er-Jahre-Ästhetik zu präsentieren, wobei ein analoges Farbschema für die Unterstützung des Dunkelmodus verwendet wird.

Vorschau

HTML-Code 

<div class="flex flex-col items-center p-4">
    <h2 class="text-2xl font-bold text-white mb-4 dark:text-gray-200">Portfolio Timeline</h2>
    <div class="flex flex-col space-y-8">
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Zeitleisten-Komponente

Eine reaktionsschnelle Zeitleistenkomponente für Dashboards mit Mikrointeraktionen und einem pastellfarbenen Farbschema mit Unterstützung für dunkle Themen. Es verwendet Tailwind CSS für das Styling und enthält Platzhalterbilder von picsum.photos und Avatare von randomuser.me.

Offen

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 komplexe, reaktionsschnelle Timeline-Komponente, die für Bildungsplattformen entwickelt wurde und ein klares, minimalistisches, auf Typografie ausgerichtetes Design mit Erdtönen und vollständiger Unterstützung des Dunkelmodus bietet.

Offen