Tous les composants

Composant Lightbox d’image

Un composant de lightbox d’image réactive conçu en mode sombre à l’aide de Tailwind CSS. Il présente un arrière-plan sombre, des effets d’opacité et des conceptions réactives pour s’adapter à différentes tailles d’écran.

Ouvrir l’aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden" id="lightbox">
    <div class="relative">
        <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="rounded-lg shadow-lg">
        <button class="absolute top-2 right-2 text-white bg-gray-800 hover:bg-gray-700 rounded-full p-2 focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">
            &times;
        </button>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/201" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/202" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/203" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/204" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/205" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
</div>

Composant Boutons OAuth

Glassmorphism OAuth Buttons Composant avec effets réactifs et prise en charge du thème sombre.

Ouvrir l’aperçu

                <section class="relative bg-gray-100 dark:bg-gray-900 py-20">
  <div class="absolute inset-0 bg-cover bg-center backdrop-filter backdrop-blur-lg" style="background-image: url('https://picsum.photos/1920/1080');"></div>
  <div class="relative container mx-auto px-4">
    <div class="max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-8">
      <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
      <div class="flex flex-col space-y-4">
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-google-logo.png" alt="Google Logo">
          Sign in with Google
        </button>
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-facebook-logo.png" alt="Facebook Logo">
          Sign in with Facebook
        </button>
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-twitter-logo.png" alt="Twitter Logo">
          Sign in with Twitter
        </button>
      </div>
    </div>
  </div>
</section>

RetroChatWindow

Un composant de fenêtre de chat de style rétro/vintage utilisant Tailwind CSS, avec un design réactif et une prise en charge du mode sombre. Comprend des messages et des avatars de remplacement. Pas de JavaScript.

Ouvrir l’aperçu

                <div class="flex flex-col h-96 w-80 sm:w-96 md:w-1/2 lg:w-1/3 mx-auto bg-gray-300 dark:bg-gray-800 border-4 border-black dark:border-white shadow-lg dark:shadow-xl font-mono">
  <!-- Header -->
  <div class="bg-gray-500 dark:bg-gray-900 text-white dark:text-gray-300 p-2 border-b-4 border-black dark:border-white flex justify-between items-center">
    <div class="text-lg font-bold">RetroNET Chat</div>
    <div class="flex space-x-1">
      <div class="w-3 h-3 bg-red-500 dark:bg-red-700 border border-black dark:border-white cursor-pointer" title="Close"></div>
      <div class="w-3 h-3 bg-yellow-500 dark:bg-yellow-600 border border-black dark:border-white cursor-pointer" title="Minimize"></div>
      <div class="w-3 h-3 bg-green-500 dark:bg-green-700 border border-black dark:border-white cursor-pointer" title="Maximize"></div>
    </div>
  </div>
  <!-- Messages Area -->
  <div class="flex-grow p-4 overflow-y-auto space-y-4">
    <!-- Received Message -->
    <div class="flex items-start space-x-3">
      <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="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
        <p>Hello! Welcome to RetroNET Chat. How can I assist you?</p>
      </div>
    </div>
    <!-- Sent Message -->
    <div class="flex items-start justify-end space-x-3 flex-row-reverse">
      <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="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
        <p>Hi there! I love the retro design!</p>
      </div>
    </div>
     <!-- Received Message with Image -->
    <div class="flex items-start space-x-3">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
        <p>Glad you like it! Here's a cool retro image:</p>
        <img src="https://picsum.photos/id/6/200/150" alt="Random Retro Image" class="mt-2 rounded-lg border-2 border-black dark:border-white max-w-full h-auto">
      </div>
    </div>
     <!-- Sent Message -->
    <div class="flex items-start justify-end space-x-3 flex-row-reverse">
      <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
        <p>Awesome! ✨</p>
      </div>
    </div>
  </div>
  <!-- Input Area -->
  <div class="p-4 border-t-4 border-black dark:border-white flex space-x-2">
    <input type="text" placeholder="Type your message..." class="flex-grow p-2 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 placeholder-gray-600 dark:placeholder-gray-400">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded border-2 border-black dark:border-white dark:bg-blue-700 dark:hover:bg-blue-800">
      Send
    </button>
  </div>
</div>

Composant Messages de réussite

Un composant qui affiche des messages de réussite audacieux avec un style de conception brutal, avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
    </div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
    </div>
</div>

Tableau de données sur le brutalisme

Un composant de table de données réactif au design brutaliste, avec prise en charge du mode sombre et des effets de survol.

Ouvrir l’aperçu

                <div class="overflow-x-auto bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white">
  <table class="min-w-full table-auto">
    <thead>
      <tr>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Name</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Title</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Status</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Role</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          John Doe
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Software Engineer</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-green-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Active</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
          Jane Smith
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">UI Designer</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-yellow-500 text-black text-xs px-2 rounded-full uppercase font-semibold">Pending</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Admin</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
          Peter Jones
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Data Analyst</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-red-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Inactive</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Composant de la liste de souhaits - Material Design

Un composant de liste de souhaits inspiré du design matériel avec un design réactif et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class='p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-gray-800'>
  <div class='text-center space-y-2 sm:text-left'>
    <div class='space-y-0.5'>
      <p class='text-lg text-black font-semibold dark:text-white'>
        Product Name
      </p>
      <p class='text-gray-500 font-medium dark:text-gray-300'>
        $19.99
      </p>
    </div>
    <button class='px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800'>
      Remove
    </button>
  </div>
  <img class='block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0' src='https://picsum.photos/200' alt='Product Image'>
</div>

Onglets de conception matérielle

Composant Tabs avec style Material Design, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS, sans JavaScript.

Ouvrir l’aperçu

                <div class="material-tabs">
  <div class="tab-header">
    <div class="tab-button active">Tab 1</div>
    <div class="tab-button">Tab 2</div>
    <div class="tab-button">Tab 3</div>
  </div>
  <div class="tab-content active">
    <h2>Content for Tab 1</h2>
    <p>This is the content for the first tab. It uses Material Design principles for layout and appearance.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 2</h2>
    <p>This is the content for the second tab.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 3</h2>
    <p>This is the content for the third tab.</p>
  </div>
</div>

Composant de galerie de produits

Un composant de galerie de produits réactif avec le style de conception Glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou et la prise en charge du thème sombre. Il présente des images de produits et des avatars d’utilisateurs.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="max-w-4xl w-full">
        <h2 class="text-2xl font-bold text-center mb-6 dark:text-white">Product Gallery</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of product 1 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By John Doe</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of product 2 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Jane Smith</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of product 3 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Mike Johnson</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 4</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of product 4 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Sarah Connor</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Composant de plan du site

Un composant de plan de site de style 3D avec un design réactif et une prise en charge du mode sombre. Il comporte des éléments tridimensionnels pour plus de profondeur et d’engagement, en utilisant des images et des avatars aléatoires.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Home</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Us</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Services</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Contact</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Blog</h3>
            <img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Portfolio</h3>
            <img src="https://picsum.photos/200/100?random=6" alt="Portfolio Image" class="rounded-lg mt-2">
        </div>
    </div>
</div>

Composant de visualisation des données

Composant de visualisation de données Neumorphism avec effets réactifs et prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center">
  <div class="w-full max-w-4xl">
    <!-- Chart Container (Placeholder) -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mb-8">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Sales Overview</h2>
      <!-- Replace with your chart library integration (e.g., Chart.js, D3.js) -->
      <div class="h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
        [Your Chart Goes Here]
      </div>
    </div>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- KPl Card 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">Revenue</h3>
        <p class="text-2xl font-bold text-green-600 dark:text-green-400">$12,345</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
      </div>

      <!-- KPl Card 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">New Users</h3>
        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">1,234</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
      </div>
    </div>

    <!-- Table Container (Placeholder) -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mt-8">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Recent Activity</h2>
        <!-- Replace with your table implementation -->
        <div class="overflow-x-auto">
            <table class="min-w-full text-gray-700 dark:text-gray-300">
                <thead>
                    <tr>
                        <th class="text-left py-2">User</th>
                        <th class="text-left py-2">Action</th>
                        <th class="text-left py-2">Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="py-2 flex items-center">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
                            John Doe
                        </td>
                        <td class="py-2">Viewed Dashboard</td>
                        <td class="py-2">1 hour ago</td>
                    </tr>
                     <tr>
                        <td class="py-2 flex items-center">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
                            Jane Smith
                            </td>
                        <td class="py-2">Updated Profile</td>
                        <td class="py-2">2 hours ago</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

  </div>
</div>

<style>
@layer components {
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
  }
}
</style>

Catégories