Tous les composants

Composant de chronologie avec Glassmorphism

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

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

Volet Composantes sociales

Composants sociaux Composant avec un design brutal, des effets réactifs et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-900 text-black dark:text-white border-4 border-black dark:border-white p-6">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-2xl font-bold font-mono">Social Feed</h2>
    <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 border-2 border-black dark:border-white font-mono">Follow</button>
  </div>
  <div class="space-y-6">
    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">John Doe</p>
          <p class="text-sm font-mono">@johndoe</p>
        </div>
      </div>
      <p class="mb-4 font-mono">This is an example social media post. Exciting content and brutalist design!</p>
      <img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-48 object-cover border-2 border-black dark:border-white">
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 100</span>
        <span>Comments: 20</span>
      </div>
    </div>

    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">Jane Smith</p>
          <p class="text-sm font-mono">@janesmith</p>
        </div>
      </div>
      <p class="mb-4 font-mono">Another brutalist-inspired post. Raw and captivating!</p>
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 50</span>
        <span>Comments: 15</span>
      </div>
    </div>
  </div>
</div>

Composant Flux d’activités

Composant de flux d’activités réactif avec un style de conception neumorphique, prenant en charge les thèmes clairs et sombres.

Ouvrir l’aperçu

                <div class='flex flex-col items-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg'>
    <h2 class='text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4'>Activity Feed</h2>
    <div class='w-full space-y-4'>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>John Doe</p>
                    <p class='text-gray-500 dark:text-gray-400'>Added a new post.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Jane Smith</p>
                    <p class='text-gray-500 dark:text-gray-400'>Commented on your photo.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Mark Johnson</p>
                    <p class='text-gray-500 dark:text-gray-400'>Liked your comment.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Emily Davis</p>
                    <p class='text-gray-500 dark:text-gray-400'>Started following you.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://picsum.photos/200/200' alt='Random Image' class='w-10 h-10 mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Random Image</p>
                    <p class='text-gray-500 dark:text-gray-400'>Posted a new image.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Composant Flux d’activités

Un composant de flux d’activité de style brutaliste avec un design réactif, des mises en page à contraste élevé et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg p-4 max-w-md w-full">
    <h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Activity Feed</h1>
    <div class="space-y-4">
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Posted a new article</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">10 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your post</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">15 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Brown</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your photo</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">30 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emma Wilson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">1 hour ago</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full h-32 object-cover rounded-md shadow-md" />
    </div>
</div>

Composant de la liste de souhaits

Un composant de liste de souhaits minimaliste avec des images de remplacement et un thème sombre.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-4">
        <h2 class="text-lg font-bold text-gray-900 dark:text-white">My Wishlist</h2>
        <ul class="mt-4 space-y-4">
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

Conteneur skeuomorphe

Un composant de conteneur réactif avec une conception Skeuomorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 shadow-lg rounded-lg">
  <div class="bg-white dark:bg-gray-700 p-6 rounded-md shadow-inner">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Skeuomorphic Container</h2>
    <p class="text-gray-700 dark:text-gray-300">This is a container with a Skeuomorphic design, featuring a subtle shadow and rounded corners to mimic a physical object. It's also responsive and supports dark mode.</p>
    <div class="mt-4">
      <img src="https://picsum.photos/seed/skeuomorphism/400/200" alt="Placeholder image" class="rounded-md shadow-md">
    </div>
  </div>
</div>

Composant de carte brutaliste

Un composant de carte brutaliste avec un design réactif et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-black border border-black dark:border-white p-6 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] max-w-sm mx-auto">
  <img class="w-full h-48 object-cover border border-black dark:border-white mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Random image">
  <h2 class="text-2xl font-bold text-black dark:text-white mb-2">Brutalist Card Title</h2>
  <p class="text-black dark:text-white mb-4">This is a description for the brutalist card component, showcasing a raw and bold design approach.</p>
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full border border-black dark:border-white mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <span class="text-black dark:text-white">John Doe</span>
  </div>
  <button class="bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white transition-colors duration-300">Read More</button>
</div>

Composant Avis sur les produits

Composant utilisant Tailwind CSS avec le style Neumorphism, les effets réactifs et la prise en charge du thème sombre. Aucun code JavaScript n’est inclus. Des images et des avatars de substitution sont utilisés.

Ouvrir l’aperçu

                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<style>
  body {
    background-color: #e0e0e0;
  }

  .neumorphism-card {
    background: #e0e0e0;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    border-radius: 12px;
  }

  .neumorphism-card-dark {
    background: #333;
    box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
  }

  @media (prefers-color-scheme: dark) {
    body {
      background-color: #333;
    }

    .neumorphism-card {
      background: #333;
      box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
    }
  }
</style>

<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Review Card 1 -->
        <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"This product is amazing! It exceeded my expectations."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- John Doe</p>
        </div>

        <!-- Review Card 2 -->
         <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"Highly recommend this to everyone. Great quality and value."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                 <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- Jane Smith</p>
        </div>

        <!-- Review Card 3 -->
         <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"Satisfied with my purchase. Will buy again."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- Peter Jones</p>
        </div>

    </div>
</div>

Composant de la table des matières

Un composant de table des matières réactif conçu pour le mode sombre, avec des sections avec des titres et des espaces réservés pour les images et les avatars.

Ouvrir l’aperçu

                <div class="bg-gray-900 text-white min-h-screen p-5">
    <h1 class="text-3xl font-bold mb-4">Table of Contents</h1>
    <ul class="space-y-4">
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 1</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 1 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 2</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 2 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 3</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 3 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 4</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 4 goes here. It can contain an overview or an introduction.</p>
        </li>
    </ul>
</div>

Composant Messages de réussite

Un composant de message de réussite simple et propre avec un design réactif et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex items-center justify-between p-4 text-green-700 bg-green-100 rounded-lg dark:bg-green-700 dark:text-green-100" role="alert">
  <div class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
    </svg>
    <p class="font-bold">Success!</p>
    <p class="ml-2 text-sm">Your action was successful.</p>
  </div>
  <button type="button" class="text-green-700 hover:text-green-900 dark:text-green-100 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>

Catégories