Cerca componenti

Categorie

Componenti Linea temporale

Linea temporale

Rappresentazione visiva degli eventi in ordine cronologico

Componente della linea temporale di Glassmorphism

Un componente Timeline reattivo con stile glassmorphism con una combinazione di colori triadica. Include elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, adatti per il consumo di blog e contenuti, con supporto per la modalità scura.

Aperto Anteprima

                <div class="bg-gray-50 dark:bg-gray-900 flex justify-center py-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl w-full backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Timeline</h2>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 1</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 1</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 1.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 2</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 2</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 2.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 3</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 3</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 3.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Timeline

Componente Timeline reattivo con design scheumorfico, combinazione di colori analoga, complessità moderata per siti Web di blog/contenuti con supporto per temi scuri. Non è necessario JavaScript, utilizza Tailwind CSS con supporto per la modalità oscura. Vengono utilizzate immagini da picsum.photos e avatar da randomuser.me.

Aperto Anteprima

                <section class="relative antialiased bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4 py-8 relative">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6">
      <div class="flex flex-col md:flex-row -mx-6">
        <div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
          <div class="relative">
            <img src="https://picsum.photos/400/300?random=1" alt="Timeline Image" class="w-full rounded-lg shadow-md">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
              <h2 class="text-xl font-semibold">Timeline Title</h2>
              <p class="text-sm">A brief description of this timeline event.</p>
            </div>
          </div>
        </div>
        <div class="md:flex-grow w-full md:w-2/3 px-6">
          <h3 class="text-2xl font-bold mb-4">Event Title 1</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500">
            <div>
              <p class="font-semibold">John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
            </div>
          </div>
          <div class="border-l-4 border-purple-500 pl-4">
            <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
      <div class="flex flex-col md:flex-row -mx-6">
        <div class="md:flex-grow w-full md:w-2/3 px-6 order-2 md:order-1">
          <h3 class="text-2xl font-bold mb-4">Event Title 2</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-green-500">
            <div>
              <p class="font-semibold">Jane Smith</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Posted on February 15, 2023</p>
            </div>
          </div>
          <div class="border-l-4 border-green-500 pl-4">
            <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0 order-1 md:order-2">
          <div class="relative">
            <img src="https://picsum.photos/400/300?random=2" alt="Timeline Image" class="w-full rounded-lg shadow-md">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
              <h2 class="text-xl font-semibold">Another Title</h2>
              <p class="text-sm">Related image description.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
      <div class="flex flex-col md:flex-row -mx-6">
        <div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
          <div class="relative">
            <img src="https://picsum.photos/400/300?random=3" alt="Timeline Image" class="w-full rounded-lg shadow-md">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
              <h2 class="text-xl font-semibold">Final Event</h2>
              <p class="text-sm">Concluding event details.</p>
            </div>
          </div>
        </div>
        <div class="md:flex-grow w-full md:w-2/3 px-6">
          <h3 class="text-2xl font-bold mb-4">Event Title 3</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-blue-500">
            <div>
              <p class="font-semibold">Peter Jones</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Posted on March 10, 2023</p>
            </div>
          </div>
          <div class="border-l-4 border-blue-500 pl-4">
            <p class="text-gray-700 dark:text-gray-300">Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Componente Timeline

Un componente della timeline reattivo con elementi di progettazione 3D, combinazione di colori triadica, complessità moderata e supporto per temi scuri, costruito con Tailwind CSS per siti web di portfolio.

Aperto Anteprima

                <div class="container mx-auto px-4 py-8">
  <h2 class="text-3xl font-bold text-center mb-8 dark:text-white">My Timeline</h2>
  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute border op dark:border-gray-700 h-full border" style="right: 50%; border: 2px solid #000; border-radius: 1%;"></div>
    <div class="border-2-2 absolute border op dark:border-gray-700 h-full border" style="left: 50%; border: 2px solid #000; border-radius: 1%;"></div>
    
    <!-- Timeline Item -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-blue-500 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
      </div>
      <div class="order-1 bg-blue-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-blue-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Alpha</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
      </div>
    </div>

    <!-- Timeline Item -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-yellow-500 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">2</h1>
      </div>
      <div class="order-1 bg-yellow-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-yellow-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Beta</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
      </div>
    </div>
    
    <!-- Timeline Item -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-red-500 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
      </div>
      <div class="order-1 bg-red-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-red-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Gamma</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
      </div>
    </div>
    
  </div>
</div>

Componente Timeline

Un componente della timeline reattivo con un design minimalista/piatto per l'e-commerce, che supporta la modalità oscura con una combinazione di colori analoga e più elementi interattivi.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md">
  <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Our Journey</h2>
  <div class="relative mb-12">
    <div class="absolute w-1 bg-gray-300 dark:bg-gray-600 h-full left-1/2 transform -translate-x-1/2"></div>

    <div class="flex items-start mb-8">
      <div class="bg-green-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 1: Browse Products</h3>
        <p class="text-gray-700 dark:text-gray-400">Explore our wide range of products and find what you love.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">January 2023</span>
      </div>
    </div>

    <div class="flex items-start mb-8">
      <div class="bg-blue-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 2: Add to Cart</h3>
        <p class="text-gray-700 dark:text-gray-400">Add your favorite items to your shopping cart.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">February 2023</span>
      </div>
    </div>

    <div class="flex items-start mb-8">
      <div class="bg-orange-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 3: Checkout</h3>
        <p class="text-gray-700 dark:text-gray-400">Proceed to checkout and complete your purchase.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">March 2023</span>
      </div>
    </div>

    <div class="flex items-start mb-8">
      <div class="bg-red-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 4: Order Confirmation</h3>
        <p class="text-gray-700 dark:text-gray-400">Receive confirmation of your order via email.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">April 2023</span>
      </div>
    </div>
  </div>

  <a href="#" class="inline-block bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800">Shop Now</a>
</div>

Componente Timeline

Un componente della timeline reattivo con uno stile di progettazione 3D, che utilizza una combinazione di colori monocromatica, progettato per mostrare il lavoro o i prodotti di un portfolio. Include più elementi interattivi e supporta un tema scuro.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 py-10">
    <div class="relative w-full max-w-4xl">
        <div class="border-l-4 border-indigo-600 dark:border-indigo-300">
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 1</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=1" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 2</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=2" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 3</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=3" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Timeline

Un componente della timeline reattivo con elementi di progettazione 3D, combinazione di colori dei toni della terra e supporto per la modalità scura. Adatto per portafogli.

Aperto Anteprima

                <div class="container mx-auto py-12">
  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute top-0 left-1/2 w-0.5 h-full bg-gray-700 transform -translate-x-1/2 dark:bg-gray-300"></div>
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet messy, consectetur adipiscing elit. Sed do eiusmod tempor messy incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-left">
        <p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
     <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-left">
        <p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
  </div>
</div>

Componente Timeline

Un componente timeline minimalista progettato per il consumo di blog e contenuti, con colori della terra e supporto per la modalità scura utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="container mx-auto p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Timeline</h1>
    <div class="relative">
        <div class="border-l border-gray-300 dark:border-gray-700 ml-6">
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/1/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 1</h2>
                        <p class="text-gray-600 dark:text-gray-400">Description of the event that took place. It was a significant moment.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-02-14</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/2/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 2</h2>
                        <p class="text-gray-600 dark:text-gray-400">Another description of an important event that happened.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-03-01</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/3/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 3</h2>
                        <p class="text-gray-600 dark:text-gray-400">A brief overview of an event that marked a milestone.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-04-10</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/4/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 4</h2>
                        <p class="text-gray-600 dark:text-gray-400">Final event description summarizing the timeline.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-05-15</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Cronologia retrò

Un semplice componente della timeline retrò/vintage che utilizza Tailwind CSS, progettato per i portafogli. È dotato di un layout reattivo e supporto per la modalità oscura, utilizzando colori complementari.

Aperto Anteprima

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

Componente Timeline

Un componente della timeline dal design piatto minimalista per mostrare lavori o prodotti in un portfolio, con colori vivaci e supporto per temi scuri.

Aperto Anteprima

                <div class="flex flex-col space-y-8 p-8 bg-white dark:bg-gray-800">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-blue-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-blue-500 dark:text-blue-400">January 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-red-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-red-500 dark:text-red-400">March 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-green-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-green-500 dark:text-green-400">May 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-purple-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-purple-500 dark:text-purple-400">August 2022</span>
        </div>
    </div>
</div>

Cronologia dell'azienda retrò/vintage

Componente Timeline reattivo retrò/vintage con supporto per la modalità oscura per siti Web aziendali/aziendali

Aperto Anteprima

                <div class="container mx-auto px-4 py-8">
  <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Company History</h2>
  <div class="relative">
    <!-- Vertical line -->
    <div class="border-r-4 border-blue-500 absolute h-full top-0" style="left: 1.5rem"></div>

    <!-- Timeline items -->
    <div class="mb-8 flex justify-between items-center w-full right-auto left-0">
      <div class="order-1 w-5/12"></div>
      <div class="z-10 flex items-center order-1 bg-blue-800 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
      </div>
      <div class="order-1 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Founded</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Our journey began with a vision to innovate.</p>
      </div>
    </div>

    <div class="mb-8 flex justify-between items-center w-full right-auto left-0 flex-row-reverse">
      <div class="order-1 w-5/12"></div>
      <div class="z-10 flex items-center order-1 bg-blue-800 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">2</h1>
      </div>
      <div class="order-1 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">First Product Launch</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Introducing our breakthrough product to the market.</p>
      </div>
    </div>

    <div class="mb-8 flex justify-between items-center w-full right-auto left-0">
      <div class="order-1 w-5/12"></div>
      <div class="z-10 flex items-center order-1 bg-blue-800 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
      </div>
      <div class="order-1 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Expanding Horizons</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Opening new offices and reaching global customers.</p>
      </div>
    </div>

     <div class="mb-8 flex justify-between items-center w-full right-auto left-0 flex-row-reverse">
      <div class="order-1 w-5/12"></div>
      <div class="z-10 flex items-center order-1 bg-blue-800 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">4</h1>
      </div>
      <div class="order-1 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Future Ready</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Innovating for a better future.</p>
      </div>
    </div>

  </div>
</div>