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

Zeitleisten-Komponente

Eine responsive Timeline-Komponente in einem minimalistischen/flachen Design für den E-Commerce, die den Dunkelmodus mit einem analogen Farbschema und mehreren interaktiven Elementen unterstützt.

Offen

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.

Offen

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