Tous les composants

Composant d’intégration de média

Un composant d’intégration multimédia réactif conçu avec le style Neumorphism dans Tailwind CSS, qui prend en charge le mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center mb-8 p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg transition-shadow duration-300 ease-in-out hover:shadow-xl">
    <div class="relative w-full h-0 pb-56 overflow-hidden rounded-lg shadow-inner bg-gray-200 dark:bg-gray-800">
        <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-sm" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
        <div class="ml-4">
            <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h5>
            <p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
        </div>
    </div>
</div>

<style>
    /* Neumorphism styles */
    .bg-white {
        background-color: #f0f0f0;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
                    -10px -10px 20px rgba(255, 255, 255, 1);
    }
    .dark .bg-gray-900 {
        background-color: #1c1c1c;
        box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5),
                    inset -10px -10px 20px rgba(255, 255, 255, 0.1);
    }
    .shadow-inner {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.9);
    }
</style>

Composant de la table des matières

Un composant minimaliste de la table des matières conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-disc pl-5 space-y-2">
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section1" class="text-gray-700 dark:text-gray-300">Section 1</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section2" class="text-gray-700 dark:text-gray-300">Section 2</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section3" class="text-gray-700 dark:text-gray-300">Section 3</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section4" class="text-gray-700 dark:text-gray-300">Section 4</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section5" class="text-gray-700 dark:text-gray-300">Section 5</a>
        </li>
    </ul>
</div>

<div class="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section1" class="text-xl font-semibold text-gray-800 dark:text-white">Section 1</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 1. <img src="https://picsum.photos/200/100" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section2" class="text-xl font-semibold text-gray-800 dark:text-white">Section 2</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 2. <img src="https://picsum.photos/200/100?random=1" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section3" class="text-xl font-semibold text-gray-800 dark:text-white">Section 3</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 3. <img src="https://picsum.photos/200/100?random=2" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section4" class="text-xl font-semibold text-gray-800 dark:text-white">Section 4</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 4. <img src="https://picsum.photos/200/100?random=3" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section5" class="text-xl font-semibold text-gray-800 dark:text-white">Section 5</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 5. <img src="https://picsum.photos/200/100?random=4" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>

Composant Avis sur les produits

Un composant d’avis sur les produits conçu dans le style brutalisme, avec un contraste élevé, un design réactif et une prise en charge du thème sombre. Il comprend des avatars d’utilisateurs et des images de produits provenant de services d’espace réservé.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Product Reviews</h2>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                <p class="text-gray-700 dark:text-gray-300">This product is amazing! It exceeded my expectations and I would highly recommend it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=1" alt="Product Image">
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Jane Smith</h3>
                <p class="text-gray-700 dark:text-gray-300">I didn't like this product. It was not what I expected and I had some issues with it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=2" alt="Product Image"> 
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Michael Lee</h3>
                <p class="text-gray-700 dark:text-gray-300">Great quality and fast shipping! Will purchase again.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=3" alt="Product Image">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800">Submit Your Review</button>
</div>

Composant de panier d’achat

Un composant de panier d’achat conçu avec le skeuomorphisme. Il présente des éléments numériques qui imitent leurs homologues du monde réel, une prise en charge réactive complète et une compatibilité avec les thèmes sombres.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="flex justify-between font-bold text-lg mt-5">
        <span class="text-gray-800 dark:text-white">Total:</span>
        <span class="text-gray-800 dark:text-white">$49.98</span>
    </div>
    <button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>

Composant de la liste de souhaits

Un composant de liste de souhaits réactif conçu en mode sombre à l’aide de Tailwind CSS. Il dispose d’une disposition de carte pour les éléments avec des images, des descriptions et des avatars d’utilisateur, prenant en charge le thème sombre et les effets réactifs.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-900 flex items-center justify-center">
    <div class="w-full max-w-2xl p-6 bg-gray-800 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold text-white mb-4">My Wishlist</h2>
        <div class="space-y-4">
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 1</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 2</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 3</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Composant du curseur de carrousel en mode sombre

Composant de curseur de carrousel en mode sombre avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <section class="dark:bg-gray-900">
  <div class="container px-6 py-10 mx-auto">
    <div class="mt-8 lg:-mx-6 lg:flex lg:items-center">
      <img class="object-cover w-full lg:mx-6 lg:w-1/2 rounded-xl h-72 lg:h-96" src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDV8fHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60" alt="">

      <div class="mt-6 lg:w-1/2 lg:mt-0 lg:mx-6">
        <p class="text-sm text-blue-500 uppercase">category</p>

        <a href="#" class="block mt-4 text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">
          All the features you want to know
        </a>

        <p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
          Lorem ipsum dolor sir amet consectetur adipisicing elit. Beatae labore, praesentium excepturi. Distinctio nostrum perferendis consectetur eligendi, maiores ipsum fastidius, non sequi.
        </p>

        <a href="#" class="inline-block mt-2 text-blue-500 dark:text-blue-400 underline">
          Read more
        </a>

        <div class="flex items-center mt-6">
          <img class="object-cover object-center rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/54.jpg" alt="">

          <div class="mx-4">
            <h1 class="text-sm text-gray-700 dark:text-gray-200">Robert John</h1>
            <p class="text-sm text-gray-500 ">Lead Developer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Composant de navigation en pied de page

Composant de navigation en pied de page avec mode sombre et effets réactifs

Ouvrir l’aperçu

                <footer class="bg-gray-900 text-gray-300 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Company</h3>
        <ul>
          <li><a href="#" class="hover:text-white">About Us</a></li>
          <li><a href="#" class="hover:text-white">Careers</a></li>
          <li><a href="#" class="hover:text-white">Press</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Products</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Features</a></li>
          <li><a href="#" class="hover:text-white">Pricing</a></li>
          <li><a href="#" class="hover:text-white">Integrations</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Support</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Help Center</a></li>
          <li><a href="#" class="hover:text-white">API Status</a></li>
          <li><a href="#" class="hover:text-white">Contact Us</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4">
        <h3 class="text-lg font-semibold text-white mb-2">Legal</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-white">Terms of Service</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-gray-700 pt-4 flex flex-col md:flex-row items-center justify-between">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
      <div class="flex space-x-4 mt-4 md:mt-0">
        <a href="#" class="hover:text-white"><i class="fab fa-facebook"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</footer>

Composant Visionneuse de fichiers

Un composant de visualisation de fichiers réactif avec le style Material Design et la prise en charge du mode sombre à l’aide de Tailwind CSS. Le composant affiche une liste de fichiers avec des icônes, des noms, des tailles et des dates de modification.

Ouvrir l’aperçu

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">File Viewer</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-gray-50 dark:bg-gray-700">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Size</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Modified</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-6 w-6">
                <svg class="h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0015.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">document.pdf</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">1.5 MB</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">2023-10-27</div>
          </td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-6 w-6">
                 <svg class="h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">image.png</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">850 KB</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">2023-10-26</div>
          </td>
        </tr>
         <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-6 w-6">
                 <svg class="h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.10029 14.8997C4.22386 13.6134 3.81964 12.0664 3.97581 10.5151C4.13198 8.96377 4.84178 7.53822 5.97267 6.40733C7.10356 5.27644 8.52911 4.56664 10.0804 4.41047C11.6317 4.2543 13.1786 4.65851 14.4649 5.53494L16.3849 3.61494C14.7782 2.47673 12.9008 1.92559 10.9819 2.04503C9.06292 2.16446 7.25865 2.94219 5.86696 4.21745C4.47527 5.49271 3.58024 7.18303 3.31396 9.00109C3.04769 10.8191 3.42494 12.7003 4.38029 14.2997L5.10029 14.8997ZM18.8997 9.10029C19.7761 10.3866 20.1804 11.9336 20.0242 13.4849C19.868 15.0362 19.1582 16.4618 18.0273 17.5927C16.8964 18.7236 15.4709 19.4334 13.9196 19.5895C12.3683 19.7457 10.8214 19.3415 9.53506 18.4651L7.61506 20.3851C9.2218 21.5233 11.0992 22.0744 13.0181 21.955C14.9371 21.8355 16.7413 21.0578 18.133 19.7825C19.5247 18.5073 20.4198 16.817 20.686 14.9989C20.9523 13.1809 20.5751 11.2997 19.62 9.70029L18.8997 9.10029Z" stroke="#4B5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>

              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">archive.zip</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">5.2 MB</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">2023-10-25</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Composant Boutons

Un composant de boutons minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir l’aperçu

                <div class="flex flex-wrap space-x-4 justify-center p-6">
    <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Primary Button
    </button>
    <button class="bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Secondary Button
    </button>
    <button class="bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Success Button
    </button>
    <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Danger Button
    </button>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-blue-500 { background-color: #2563eb; }
        .bg-gray-300 { background-color: #4b5563; }
        .bg-green-500 { background-color: #22c55e; }
        .bg-red-500 { background-color: #ef4444; }
        .text-white { color: #ffffff; }
        .text-gray-800 { color: #f9fafb; }
        .shadow-md { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
    }
</style>

Composant Notifications

Composant de notifications de style Skeuomorphism avec effets réactifs et prise en charge du thème sombre, construit à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center p-4">
    <!-- Notification 1 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Just joined the platform.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
    
    <!-- Notification 2 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Liked your post.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
    
    <!-- Notification 3 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Commented on your photo.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
</div>

Catégories