Rechercher des composants

Catégories

Composants Chronologie

Chronologie

Représentation visuelle des événements dans l’ordre chronologique

Composant de chronologie

Un composant de chronologie réactif avec prise en charge du thème sombre, construit avec Tailwind CSS. Il affiche une série d’événements avec des dates, des titres et des descriptions, adaptés à un tableau de bord.

Ouvrir Aperçu

                <div class="container mx-auto px-4 py-8">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-8 text-center">Project Timeline</h2>

  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute border-opacity-20 border-gray-700 dark:border-gray-200 h-full border" style="left: 50%;"></div>

    <!-- right timeline -->
    <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-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 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">Phase 1: Planning</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Initial project scope definition, requirements gathering, and resource allocation.</p>
      </div>
    </div>

    <!-- left timeline -->
    <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-green-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 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">Phase 2: Development</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Building the core features and functionalities based on the defined requirements.</p>
      </div>
    </div>
    
    <!-- right timeline -->
    <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-yellow-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 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">Phase 3: Testing</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Comprehensive testing to identify and fix bugs and ensure quality.</p>
      </div>
    </div>

    <!-- left timeline -->
    <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-red-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 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">Phase 4: Deployment</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Releasing the project to the production environment.</p>
      </div>
    </div>

    <!-- right timeline -->
    <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-purple-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 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">Phase 5: Maintenance</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Ongoing support, updates, and bug fixes.</p>
      </div>
    </div>
  </div>
</div>

<style>
  .left-timeline .z-20:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(243 244 246);
    right: -10px;
  }

  .dark .left-timeline .z-20:after {
     border-left: 10px solid rgb(55 65 81);
  }

  .right-timeline .z-20:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgb(243 244 246);
    left: -10px;
  }

   .dark .right-timeline .z-20:after {
     border-right: 10px solid rgb(55 65 81);
  }
</style>

Composant de chronologie

Un composant de chronologie réactif simple conçu dans un style skeuomorphe avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise. Il dispose d’un support de thème sombre et utilise Tailwind CSS pour le style.

Ouvrir Aperçu

                <div class="max-w-4xl mx-auto p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Our Journey</h2>
    <div class="border-l-2 border-gray-300 dark:border-gray-600">
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-01-01</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Launched our first product</h3>
                <p class="text-gray-600 dark:text-gray-400">We successfully launched our first product to the market, marking a significant milestone for our company.</p>
            </div>
        </div>
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-06-15</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Expanded our services</h3>
                <p class="text-gray-600 dark:text-gray-400">We expanded our service offerings to better meet the needs of our clients and enhance our market presence.</p>
            </div>
        </div>
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-12-01</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Achieved 1000 clients</h3>
                <p class="text-gray-600 dark:text-gray-400">We reached a significant achievement of acquiring our 1000th client, showcasing our growth and success.</p>
            </div>
        </div>
    </div>
</div>

Composant de chronologie

Un composant de chronologie réactif conçu dans le style Brutalism avec Tailwind CSS, prenant en charge le thème sombre et présentant des images et des avatars de remplacement.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
  <h1 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">Timeline</h1>
  <div class="border-l-4 border-gray-300 dark:border-gray-700">
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">John Doe</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-01</span>
    </div>
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Jane Smith</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-05</span>
    </div>
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Alice Johnson</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        <img src="https://picsum.photos/200/100?random=3" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-10</span>
    </div>
  </div>
</div>

Composant de chronologie avec Glassmorphism

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

Ouvrir Aperçu

                <section class="dark:bg-gray-900 bg-gray-100 py-10">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-10">Event Timeline</h2>
        <div class="flex flex-col md:flex-row justify-center items-center">
            <!-- Event 1 -->
            <div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
                <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 1</h3>
                    <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     <span class="text-sm text-gray-600 dark:text-gray-400">Date: March 10, 2023</span>
                </div>
            </div>
            <!-- Event 2 -->
            <div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
                 <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                 <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 2</h3>
                    <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>
                     <span class="text-sm text-gray-600 dark:text-gray-400">Date: April 15, 2023</span>
                </div>
            </div>
            <!-- Event 3 -->
            <div class="flex flex-col items-center md:w-1/3 relative">
                 <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                 <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 3</h3>
                    <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <span class="text-sm text-gray-600 dark:text-gray-400">Date: May 20, 2023</span>
                </div>
            </div>
        </div>
    </div>
</section>

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.

Ouvrir Aperçu

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

Composant de chronologie

Composant de chronologie avec conception 3D, effets réactifs et prise en charge du thème sombre

Ouvrir Aperçu

                <div class="container mx-auto p-4">
  <h1 class="text-4xl font-bold text-center mb-8 dark:text-white">Timeline</h1>

  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute border-opacity-20 border-gray-700 h-full border" style="left: 50%;"></div>

    <!-- right timeline -->
    <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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 1</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
    </div>

    <!-- left timeline -->
    <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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 2</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
    </div>
    
        <!-- right timeline -->
    <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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 3</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
    </div>
    
    <!-- left timeline -->
    <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-gray-800 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-gray-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Event Title 4</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
    </div>
  </div>
</div>

Composant de chronologie rétro/vintage

Un composant de chronologie réactif avec un design rétro/vintage et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-purple-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 1</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1985</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-pink-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 2</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <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 class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-green-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 3</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1995</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-yellow-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 4</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <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>
</div>

Composant de chronologie skeuomorphe

Un composant de chronologie skeuomorphe avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS. Pas besoin de JavaScript, seulement HTML et CSS.

Ouvrir Aperçu

                <div class="container mx-auto px-4 py-8">

  <!-- Skeuomorphic Timeline -->
  <div class="relative">
    <!-- Vertical Line (mimics a physical line) -->
    <div class="border-r-4 border-gray-300 dark:border-gray-700 absolute h-full top-0 left-1/2 transform -translate-x-1/2"></div>

    <!-- Timeline Items -->
    <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-right">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 1</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

    <div class="mb-8 flex justify-between items-center w-full left-timeline">
       <div class="order-1 w-5/12 px-1 py-4 text-left">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 2</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="order-1 w-5/12"></div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></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-right">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 3</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

      <div class="mb-8 flex justify-between items-center w-full left-timeline">
       <div class="order-1 w-5/12 px-1 py-4 text-left">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 4</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="order-1 w-5/12"></div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

  </div>
</div>

<style>
  /* Styles for a simple skeuomorphic look */
  .left-timeline .bg-white,
  .right-timeline .bg-white {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }

   .dark .left-timeline .bg-gray-800,
  .dark .right-timeline .bg-gray-800 {
    box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #2e2e2e;
  }

  .left-timeline .bg-white.dark\:bg-gray-800,
  .right-timeline .bg-white.dark\:bg-gray-800 {
     border-color: #d1d5db; /* subtle light border */
  }

   .dark .left-timeline .bg-white.dark\:bg-gray-800,
  .dark .right-timeline .bg-white.dark\:bg-gray-800 {
     border-color: #4b5563; /* subtle dark border */
  }


   @media (max-width: 768px) {
      .left-timeline, .right-timeline {
        justify-content: flex-end;
      }

      .left-timeline .w-5/12,
      .right-timeline .w-5/12 {
        width: 100%;
      }

       .left-timeline .px-1,
      .right-timeline .px-1 {
        padding-left: 1rem;
         padding-right: 1rem;
      }


      .left-timeline .text-left,
      .right-timeline .text-right {
        text-align: left;
      }

      .left-timeline .order-1,
      .right-timeline .order-1 {
        order: 1;
      }

      .left-timeline .w-5/12:nth-child(1),
      .right-timeline .w-5/12:nth-child(1) {
        order: 2;
      }


      .left-timeline .rounded-full,
      .right-timeline .rounded-full {
        position: relative;
        left: auto;
        transform: none;
        margin-right: 1rem;
      }

       .border-r-4 {
        border-right-width: 0;
        border-left-width: 4px;
        left: 1rem;
      }
  }
</style>

Composant de chronologie de neumorphisme

Un composant de chronologie réactif stylisé avec Neumorphism à l’aide de Tailwind CSS, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="w-full max-w-3xl space-y-8">
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 1</h2>
            <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=1" alt="Random Image" />
        </div>
        
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 2</h2>
            <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=2" alt="Random Image" />
        </div>
        
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 3</h2>
            <p class="text-gray-600 dark:text-gray-300">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=3" alt="Random Image" />
        </div>
    </div>
</div>

<style>
    @layer components {
        .shadow-neumorphism {
            box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2),
                        -8px -8px 15px rgba(255, 255, 255, 0.3);
        }
    }
</style>