CCHub Logo CCHub Tailwind Collection
Komponenten Zeitstrahl Retro-Zeitleiste

Retro-Zeitleiste

Eine einfache Retro-/Vintage-Timeline-Komponente mit Tailwind CSS, die für Portfolios entwickelt wurde. Es verfügt über ein reaktionsschnelles Layout und Unterstützung für den Dunkelmodus mit Komplementärfarben.

Vorschau

HTML-Code 

<div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row">
    <div class="md:w-1/2">
      <div class="border-r-2 border-purple-500 dark:border-purple-700 pr-8">
        <div class="mb-8 text-right">
          <div class="text-sm text-gray-600 डार्क:text-gray-300">1985</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">Started Coding</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Learned my first programming language on a vintage computer.</p>
        </div>
        <div class="mb-8 text-right">
          <div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">First Website</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Launched my first personal website, very Geocities-esque.</p>
        </div>
      </div>
    </div>
    <div class="md:w-1/2 mt-8 md:mt-0">
      <div class="border-l-2 border-teal-500 dark:border-teal-700 प्ल-8">
        <div class="mb-8">
          <div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">Went Pro</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Started working as a professional web developer.</p>
        </div>
        <div class="mb-8">
          <div class="text-sm text-gray-600 dark:text-gray-300">2020</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">Modern Technologies</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Embracing modern frameworks and design trends, still with a nod to the classics.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Gaming-Timeline-Komponente

Eine einfache, lebendige und reaktionsschnelle Timeline-Komponente mit einem subtilen 3D-Design, das für Gaming-Websites optimiert ist und den Dunkelmodus unterstützt.

Offen

Zeitleisten-Komponente

Eine reaktionsschnelle Timeline-Komponente mit Unterstützung für den Dunkelmodus und Mikrointeraktionen mit Tailwind CSS. Kein JavaScript erforderlich.

Offen

Zeitleisten-Komponente

Eine responsive Timeline-Komponente mit 3D-Designelementen, triadischem Farbschema, moderater Komplexität und Unterstützung für dunkle Themen, die mit Tailwind CSS für Portfolio-Websites erstellt wurde.

Offen