Componentes de búsqueda

Categorías

Componentes Línea de tiempo

Línea de tiempo

Representación visual de los eventos en orden cronológico

Componente de línea de tiempo de Glassmorphism

Un componente de línea de tiempo responsivo con un estilo de morfismo de vidrio con un esquema de color triádico. Incluye elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, adecuados para el blog y el consumo de contenido, con soporte para modo oscuro.

Abrir Vista previa

                <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 de línea de tiempo

Componente de línea de tiempo receptivo con diseño esqueuomórfico, combinación de colores análoga, complejidad moderada para sitios web de blogs/contenido con soporte de tema oscuro. No se necesita JavaScript, usa Tailwind CSS con soporte para modo oscuro. Se utilizan imágenes de picsum.photos y avatares de randomuser.me.

Abrir Vista previa

                <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 de línea de tiempo

Un componente de línea de tiempo responsivo con elementos de diseño 3D, combinación de colores triádica, complejidad moderada y compatibilidad con temas oscuros, creado con Tailwind CSS para sitios web de cartera.

Abrir Vista previa

                <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 de línea de tiempo

Un componente de línea de tiempo receptivo con un diseño minimalista / plano para comercio electrónico, que admite el modo oscuro con un esquema de color análogo y múltiples elementos interactivos.

Abrir Vista previa

                <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 de línea de tiempo

Un componente de línea de tiempo interactivo con un estilo de diseño 3D, que utiliza una combinación de colores monocromática, diseñado para mostrar el trabajo o los productos de una cartera. Incluye múltiples elementos interactivos y admite un tema oscuro.

Abrir Vista previa

                <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 de línea de tiempo

Un componente de línea de tiempo receptivo con elementos de diseño 3D, combinación de colores en tonos tierra y compatibilidad con el modo oscuro. Adecuado para carteras.

Abrir Vista previa

                <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 de línea de tiempo

Un componente de línea de tiempo minimalista diseñado para el blog y el consumo de contenido, con colores en tonos tierra y soporte para modo oscuro usando Tailwind CSS.

Abrir Vista previa

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

Cronología retro

Un componente de línea de tiempo simple, retro/vintage que usa Tailwind CSS, diseñado para portafolios. Cuenta con un diseño responsivo y soporte para modo oscuro, utilizando colores complementarios.

Abrir Vista previa

                <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 de línea de tiempo

Un componente de línea de tiempo de diseño plano minimalista para mostrar trabajos o productos en un portafolio, con colores vibrantes y soporte para temas oscuros.

Abrir Vista previa

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

Cronología de la empresa Retro/Vintage

Componente de línea de tiempo retro / vintage receptivo con soporte de modo oscuro para sitios web comerciales / corporativos

Abrir Vista previa

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