Composants Chronologie Composant de chronologie

Composant de chronologie

Un composant de chronologie réactif avec prise en charge du mode sombre et des micro-interactions à l’aide de Tailwind CSS. Aucun JavaScript n’est requis.

Aperçu

HTML Code

<div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:grid grid-cols-12 text-gray-50">
    <div class="flex md:contents">
      <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
        <div class="h-full w-6 flex items-center justify-center">
          <div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
        </div>
        <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
        <h3 class="font-semibold text-lg mb-1">Event Title 1</h3>
        <p class="leading-tight text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
        </p>
      </div>
    </div>

    <div class="flex md:contents">
      <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
        <div class="h-full w-6 flex items-center justify-center">
          <div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
        </div>
        <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
        <h3 class="font-semibold text-lg mb-1">Event Title 2</h3>
        <p class="leading-tight text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
        </p>
      </div>
    </div>

    <div class="flex md:contents">
      <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
        <div class="h-full w-6 flex items-center justify-center">
          <div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
        </div>
        <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
        <h3 class="font-semibold text-lg mb-1">Event Title 3</h3>
        <p class="leading-tight text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
        </p>
      </div>
    </div>

  </div>
</div>

Composants associés

Composant de chronologie

Un composant de chronologie réactif avec une palette de couleurs triadique, une conception axée sur la micro-interaction pour les sites Web d’entreprise, prenant en charge les modes clair et sombre.

Ouvrir

Composant de chronologie

Un composant de chronologie réactif avec un design Glassmorphism, une palette de couleurs complémentaire et une prise en charge du thème sombre, adapté aux sites Web d’entreprise. Il comporte des éléments translucides givrés ressemblant à du verre dépoli avec des effets de flou.

Ouvrir

Composant de chronologie avec Glassmorphism

Composant de chronologie avec style Glassmorphism, réactif et avec prise en charge du thème sombre

Ouvrir