Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Monospace_Booking_Navigation_Complex_Triadic

Un composant complexe de navigation de réservation/réservation avec une esthétique monospace/développeur. Il dispose d’une palette de couleurs triadiques, d’un design réactif et d’une prise en charge du mode sombre, idéal pour les systèmes de rendez-vous.

Ouvrir Aperçu

                <div class="font-mono min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 flex flex-col">
  <!-- Header Navigation -->
  <header class="bg-emerald-600 dark:bg-emerald-800 text-white p-4 shadow-lg z-10">
    <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
      <div class="text-2xl font-bold tracking-tight mb-2 md:mb-0">[BOOK.]_SYSTEM</div>
      <nav class="flex flex-wrap justify-center gap-4 text-sm font-medium">
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Dashboard</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Bookings</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Services</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Clients</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Reports</a>
      </nav>
      <div class="mt-4 md:mt-0 flex items-center gap-4">
        <button class="p-2 rounded-full bg-emerald-700 dark:bg-emerald-900 hover:bg-emerald-800 dark:hover:bg-emerald-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white" aria-label="Notifications">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0V6a2 2 0 012-2h2a2 2 0 012 2v5a6.002 6.002 0 014 5.158V14a2 2 0 00-2-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 0"></path></svg>
        </button>
        <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
      </div>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="flex-1 container mx-auto p-4 md:p-6 lg:p-8 flex flex-col lg:flex-row gap-6">

    <!-- Sidebar / Contextual Controls -->
    <aside class="w-full lg:w-1/4 bg-blue-50 dark:bg-blue-950 p-6 rounded-lg border-2 border-dashed border-blue-200 dark:border-blue-800 shadow-md">
      <h2 class="text-xl font-bold mb-4 text-blue-800 dark:text-blue-200 underline">_Filter_Bookings</h2>
      <div class="mb-6">
        <label for="service-type" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[SERVICE]</label>
        <select id="service-type" class="w-full p-2 rounded-md bg-blue-100 dark:bg-blue-900 border border-blue-300 dark:border-blue-700 focus:ring-blue-500 focus:border-blue-500 text-blue-900 dark:text-blue-100 placeholder-blue-400 dark:placeholder-blue-600 outline-none">
          <option>All Services</option>
          <option>Consultation</option>
          <option>Maintenance</option>
          <option>Deployment</option>
        </select>
      </div>
      <div class="mb-6">
        <label for="date-range" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[DATE_RANGE]</label>
        <input type="range" id="date-range" min="0" max="100" value="50" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer dark:bg-blue-700 accent-blue-600">
        <div class="flex justify-between text-xs text-blue-600 dark:text-blue-400 mt-1">
          <span>Past</span>
          <span>Future</span>
        </div>
      </div>
      <div class="mb-6">
        <label for="status-filter" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[STATUS]</label>
        <div class="flex flex-col gap-2">
          <label class="inline-flex items-center">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded dark:bg-blue-800 dark:border-blue-700 focus:ring-blue-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Pending</span>
          </label>
          <label class="inline-flex items-center">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-emerald-600 rounded dark:bg-emerald-800 dark:border-emerald-700 focus:ring-emerald-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Confirmed</span>
          </label>
          <label class="inline-flex items-center">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-rose-600 rounded dark:bg-rose-800 dark:border-rose-700 focus:ring-rose-500"><span class="ml-2 text-blue-900 dark:text-blue-100">Cancelled</span>
          </label>
        </div>
      </div>
      <button class="w-full bg-blue-600 dark:bg-blue-700 text-white py-2 rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-blue-950 focus:ring-blue-500">_APPLY_FILTERS</button>
    </aside>

    <!-- Main Content Panel -->
    <section class="flex-1 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-2 border-gray-200 dark:border-gray-700">
      <h1 class="text-2xl md:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 flex items-center">
        <span class="mr-2 text-emerald-500 dark:text-emerald-400">&#9608;</span> UPCOMING_BOOKINGS
      </h1>

      <!-- Booking List/Table -->
      <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-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ID]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[CLIENT]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[SERVICE]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[DATE]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[TIME]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[STATUS]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ACTIONS]</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            <!-- Booking Row 1 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1A2B3C</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/67.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Alice_Smith</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Consultation_V2</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-28</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10:00_AM</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
                  CONFIRMED
                </span>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
                <a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
              </td>
            </tr>
            <!-- Booking Row 2 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1D4E5F</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Bob_Johnson</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_System_Setup</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-29</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">02:00_PM</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">
                  PENDING
                </span>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
                <a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
              </td>
            </tr>
            <!-- Booking Row 3 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x2F6A7B</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Carol_White</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Debugging_Svc</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-01</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09:30_AM</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
                  CONFIRMED
                </span>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
                <a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
              </td>
            </tr>
            <!-- Booking Row 4 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x3B8C9D</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">David_King</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Data_Migration</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-05</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm flex items-center justify-start text-rose-500 dark:text-rose-400">
                CANCELED
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">01:00_PM</td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_VIEW</a>
                <a href="#" class="text-gray-400 dark:text-gray-600 cursor-not-allowed">_Rebook</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="mt-8 flex flex-col sm:flex-row justify-between items-center text-sm">
        <div class="text-gray-600 dark:text-gray-400 mb-4 sm:mb-0">Showing 1 to 4 of 12 Results</div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
            <span class="sr-only">Previous</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors duration-200 z-10">1</a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">2</a>
          <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">3</a>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">...</span>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">12</a>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
            <span class="sr-only">Next</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </nav>
      </div>

    </section>

  </main>

  <!-- Footer Component -->
  <footer class="bg-rose-600 dark:bg-rose-800 text-white p-4 text-center text-sm opacity-90">
    <div class="container mx-auto">
      &copy; 2024 <span class="font-bold">[BOOK._SYS]</span>. All rights reserved. <span class="text-opacity-70">//_end_of_transmission</span>
    </div>
  </footer>
</div>

Fiche produit e-commerce pour l’agriculture

Un composant de fiche produit ludique et joyeux pour les sites e-commerce agricole, avec des éléments arrondis, des tons océan/bleu, un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 md:p-8 bg-gradient-to-br from-blue-50 to-sky-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-blue-200 dark:border-blue-800">
    <div class="relative">
      <img class="w-full h-48 sm:h-56 md:h-64 object-cover object-center rounded-t-2xl" src="https://picsum.photos/600/400?random=1&seed=farming" alt="Fresh Organic Produce">
      <div class="absolute top-3 left-3 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform -rotate-3">Grows Fast!</div>
      <div class="absolute top-3 right-3 bg-green-400 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform rotate-3">Fresh Pick</div>
    </div>
    <div class="p-5 sm:p-6 md:p-7 space-y-4">
      <h3 class="text-xl sm:text-2xl font-extrabold text-blue-800 dark:text-blue-200 leading-tight">Organic Heirloom Tomatoes</h3>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed">Cultivated with love and care, these juicy heirloom tomatoes are perfect for your summer salads and sauces.</p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-2xl sm:text-3xl font-extrabold text-green-600 dark:text-green-400">$5.99</span>
        <span class="text-lg text-gray-500 line-through dark:text-gray-600">$7.50</span>
      </div>
      <div class="flex items-center text-yellow-500 mt-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <span class="text-sm ml-1 text-gray-500 dark:text-gray-400">(4.5)</span>
      </div>
      <button type="button" class="w-full py-3 sm:py-4 px-6 mt-4 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-900 text-white font-bold rounded-full shadow-lg text-lg sm:text-xl transform transition-transform duration-200 hover:scale-[1.03] flex items-center justify-center space-x-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span>Add to Basket</span>
      </button>
      <div class="flex items-center mt-5 p-3 bg-blue-50 dark:bg-gray-800 rounded-xl">
        <img class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-blue-300 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Farmer John">
        <div>
          <p class="font-semibold text-blue-800 dark:text-blue-300">Harvested by Farmer John</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Local & Sustainable</p>
        </div>
      </div>
    </div>
  </div>
</div>

Volet Forum communautaire

Un composant de forum communautaire simple et dynamique avec des transitions dégradées, conçu pour les plateformes de divertissement/médias. Il dispose d’une mise en page réactive avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white bg-opacity-90 dark:bg-gray-800 dark:bg-opacity-95 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-indigo-600 dark:from-red-400 dark:to-indigo-400 mb-2 transition-colors duration-300">
        Cosmic Conversations
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 transition-colors duration-300">
        Join the vibrant discussion! Your hub for all things entertainment.
      </p>
    </div>

    <div class="p-6 sm:p-8 grid gap-6 sm:gap-8">

      <!-- Forum Post 1 -->
      <div class="bg-white dark:bg-gray-900 rounded-lg p-5 sm:p-6 shadow-lg transform transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-pink-500 dark:border-purple-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Alex 'The Wanderer' Ross</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
          </div>
        </div>
        <h3 class="text-xl md:text-2xl font-bold mb-3 text-gray-800 dark:text-gray-100">"Favorite Sci-Fi series of all time?" 🎉</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Just finished binge-watching 'Starbound Chronicles' again and it got me thinking. What's everyone's absolute favorite sci-fi series, movies included? The one that changed your view of the universe!
        </p>
        <img class="w-full h-48 object-cover rounded-lg mb-4 shadow" src="https://picsum.photos/600/300?random=1" alt="Placeholder image for post">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center space-x-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span>154 Likes</span>
            </button>
            <button class="flex items-center space-x-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span>48 Comments</span>
            </button>
          </div>
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors duration-200">Read More</a>
        </div>
      </div>

      <!-- Forum Post 2 -->
      <div class="bg-white dark:bg-gray-900 rounded-lg p-5 sm:p-6 shadow-lg transform transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-green-500 dark:border-teal-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Luna 'The Dreamweaver' Bright</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 5 hours ago</p>
          </div>
        </div>
        <h3 class="text-xl md:text-2xl font-bold mb-3 text-gray-800 dark:text-gray-100">"Underrated Indie Games for a Weekend Binge?" 🎮✨</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Hey fellow gamers! My usual rotation is getting a bit stale. Any recommendations for truly underrated indie games that flew under the radar but deserve some love? Thinking unique art styles or compelling narratives.
        </p>
        <img class="w-full h-48 object-cover rounded-lg mb-4 shadow" src="https://picsum.photos/600/300?random=2" alt="Placeholder image for post">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center space-x-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span>87 Likes</span>
            </button>
            <button class="flex items-center space-x-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span>22 Comments</span>
            </button>
          </div>
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors duration-200">View Discussion</a>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700 flex justify-center">
      <button class="px-8 py-3 rounded-full text-white font-bold text-lg 
                     bg-gradient-to-r from-red-500 to-orange-500 
                     hover:from-red-600 hover:to-orange-600 
                     dark:from-pink-600 dark:to-purple-600 
                     dark:hover:from-pink-700 dark:hover:to-purple-700 
                     shadow-lg transform transition-all duration-300 
                     hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 
                     focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-pink-500">
        Create New Post
      </button>
    </div>
  </div>
</div>

Brutalisme Booking Media Composante

Un composant multimédia simple, de style brutaliste, pour les systèmes de réservation, avec un contraste élevé et une palette de couleurs complémentaire, entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 border-4 border-black dark:border-red-500 shadow-[8px_8px_0_0_#EF4444] dark:shadow-[8px_8px_0_0_#1E3A8A] transition-all duration-300 ease-in-out">
    <div class="relative overflow-hidden bg-red-500 dark:bg-red-700 h-48 sm:h-56 lg:h-64 border-b-4 border-black dark:border-red-500">
      <img src="https://picsum.photos/600/400?random=1" alt="Booking slot preview" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-filter duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
      <div class="absolute bottom-0 left-0 p-4">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-yellow-300 dark:text-yellow-200 uppercase leading-none break-words">
          Book Your
          <span class="block">Next Slot</span>
        </h3>
      </div>
    </div>

    <div class="p-4 sm:p-6 border-b-4 border-black dark:border-red-500">
      <p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 uppercase mb-2">
        Available now!
      </p>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 font-medium leading-tight">
        Secure your spot for an exclusive consultation. Limited availability each week.
      </p>
    </div>

    <div class="p-4 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <div class="flex items-center space-x-3">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Facilitator's avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-black dark:border-yellow-400 object-cover grayscale hover:grayscale-0 transition-filter duration-300">
        <div class="text-gray-900 dark:text-gray-100">
          <p class="font-extrabold text-base sm:text-lg uppercase leading-none">Jane Doe</p>
          <p class="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-400">Senior Consultant</p>
        </div>
      </div>
      <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-4 border-black dark:border-blue-700 bg-yellow-300 dark:bg-yellow-500 text-black dark:text-white font-extrabold text-lg uppercase shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#1E3A8A] hover:bg-yellow-400 dark:hover:bg-yellow-600 transition-all duration-200 ease-in-out whitespace-nowrap">
        Book Slot
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      </a>
    </div>
  </div>
</div>

Composant Suivre le bouton

Un composant de bouton « Suivre » réactif conçu pour les plateformes immobilières, avec une palette de couleurs bleues d’entreprise, la prise en charge du mode sombre et un subtil effet de survol interactif.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="relative flex items-center justify-center px-6 py-2 overflow-hidden font-semibold text-white transition-all duration-300 ease-in-out bg-blue-600 rounded-lg group shadow-lg dark:bg-blue-700 dark:shadow-blue-900/50 hover:shadow-xl hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
    <span class="relative z-10 text-base group-hover:text-white transition-colors duration-200">
      Follow
    </span>
    <svg class="absolute w-0 h-0 transition-all duration-300 ease-in-out transform -translate-x-full opacity-0 group-hover:opacity-100 group-hover:w-6 group-hover:h-6 group-hover:translate-x-0 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
    </svg>
    <span class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 rounded-lg opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"></span>
  </button>
</div>

Luxury_Pastel_Government_Footer

Un composant de pied de page élégant et réactif pour les sites Web gouvernementaux ou de services publics, doté d’un design luxueux avec une palette de couleurs pastel et une prise en charge du mode sombre. Comprend des liens de navigation, des coordonnées, des médias sociaux et des droits d’auteur.

Ouvrir Aperçu

                <footer class="bg-gradient-to-r from-teal-50 to-blue-50 text-gray-700 dark:from-gray-900 dark:to-gray-950 dark:text-gray-300 py-12 px-4 shadow-inner border-t border-gray-200 dark:border-gray-800">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">

    <!-- Logo & Description -->
    <div class="flex flex-col items-start">
      <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse mb-4">
        <svg class="w-8 h-8 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M2.25 6a3 3 0 013-3h13.5a3 3 0 013 3v10.5a3 3 0 01-3 3H5.25a3 3 0 01-3-3V6zm3-.75a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75H5.25zM6 9a.75.75 0 01.75-.75h10.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V9z" clip-rule="evenodd" />
        </svg>
        <span class="self-center text-3xl font-serif font-semibold whitespace-nowrap text-teal-800 dark:text-teal-200">Government</span>
      </a>
      <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs">
        Committed to serving the public with transparency

Memphis_Marketplace_Charts_Component

Il s’agit d’un composant de graphiques complexe et réactif avec une esthétique Memphis Design, des couleurs complémentaires audacieuses, adapté à une place de marché multi-fournisseurs. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-pink-100 dark:bg-zinc-900 font-sans min-h-screen flex items-center justify-center">
  <div class="w-full max-w-7xl bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden
              border-4 border-fuchsia-500 dark:border-teal-400
              grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10
              relative"> 
    
    <!-- Memphis background patterns -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden rounded-3xl">
      <div class="absolute -bottom-16 -left-16 w-64 h-64 bg-teal-400 dark:bg-fuchsia-600 rounded-full mix-blend-multiply opacity-30"></div>
      <div class="absolute -top-20 -right-20 w-80 h-80 bg-fuchsia-500 dark:bg-cyan-500 rounded-full mix-blend-multiply opacity-20"></div>
      <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-300 dark:bg-purple-600 rounded-lg transform rotate-45 mix-blend-multiply opacity-30"></div>
      <div class="absolute bottom-1/3 right-1/4 w-48 h-12 bg-blue-400 dark:bg-orange-500 rounded-full mix-blend-multiply opacity-20"></div>
    </div>

    <!-- Main Content Grid -->
    <div class="relative z-10 lg:col-span-2 space-y-6">
      
      <!-- Header -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b-4 border-dashed border-cyan-400 dark:border-yellow-500 pb-6">
        <div>
          <h1 class="text-4xl sm:text-5xl font-extrabold text-fuchsia-600 dark:text-teal-400 mb-2 leading-tight">Marketplace Insights</h1>
          <p class="text-zinc-600 dark:text-zinc-300 text-lg sm:text-xl font-medium">Performance overview for your vendors.</p>
        </div>
        <button class="px-6 py-3 bg-teal-500 dark:bg-fuchsia-600 text-white rounded-xl shadow-lg
                       transform hover:scale-105 transition-all duration-300
                       border-2 border-fuchsia-600 dark:border-teal-500
                       text-lg font-semibold whitespace-nowrap">View All Reports</button>
      </div>

      <!-- Main Charts Section -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <!-- Sales Volume Chart -->
        <div class="bg-violet-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-fuchsia-400 dark:border-cyan-400">
          <h3 class="text-2xl font-bold text-fuchsia-700 dark:text-teal-300 mb-4">Sales Volume by Category</h3>
          <div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
             <!-- Placeholder for Chart -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10 ">
              <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-teal-300 to-transparent dark:from-teal-600"></div>
              <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
            </div>
            <p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
          </div>
          <div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
            <p class="font-medium">Total Sales: <span class="text-fuchsia-600 dark:text-teal-400 font-bold">$1.2M</span></p>
          </div>
        </div>

        <!-- Vendor Performance Chart -->
        <div class="bg-yellow-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-cyan-400 dark:border-fuchsia-400">
          <h3 class="text-2xl font-bold text-cyan-700 dark:text-yellow-300 mb-4">Top 5 Vendor Performance</h3>
          <div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
             <!-- Placeholder for Chart -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10">
              <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
              <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-teal-300 to-transparent dark:from-teal-600"></div>
            </div>
            <p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
          </div>
          <div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
            <p class="font-medium">Average Rating: <span class="text-cyan-600 dark:text-yellow-400 font-bold">4.7/5</span></p>
          </div>
        </div>
      </div>

      <!-- Quick Stats Section -->
      <div class="bg-indigo-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-teal-500 dark:border-purple-400">
        <h3 class="text-2xl font-bold text-teal-700 dark:text-purple-300 mb-4">Quick Stats</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-teal-400 dark:border-purple-400 shadow-sm">
            <p class="text-3xl font-extrabold text-teal-500 dark:text-purple-300 leading-none">150+</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Active Vendors</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-fuchsia-400 dark:border-cyan-400 shadow-sm">
            <p class="text-3xl font-extrabold text-fuchsia-500 dark:text-cyan-300 leading-none">8k+</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Products Listed</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-yellow-400 dark:border-orange-400 shadow-sm">
            <p class="text-3xl font-extrabold text-yellow-500 dark:text-orange-300 leading-none">$1.8M</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Total Commission</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-blue-400 dark:border-lime-400 shadow-sm">
            <p class="text-3xl font-extrabold text-blue-500 dark:text-lime-300 leading-none">92%</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Vendor Retention</p>
          </div>
        </div>
      </div>

    </div>

    <!-- Sidebar / Latest Activity -->
    <div class="relative z-10 lg:col-span-1 space-y-6">
      <div class="bg-orange-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-purple-500 dark:border-fuchsia-400">
        <h3 class="text-2xl font-bold text-purple-700 dark:text-fuchsia-300 mb-4">Latest Vendor Activity</h3>
        <div class="space-y-4">
          <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor A <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">15 min ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Added <span class="font-bold text-purple-600 dark:text-fuchsia-300">3 new products</span></p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor B <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">1 hour ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Updated <span class="font-bold text-purple-600 dark:text-fuchsia-300">shipping info</span></p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor C <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">3 hours ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold <span class="font-bold text-purple-600 dark:text-fuchsia-300">5 items</span> (electronics)</p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor D <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">Yesterday</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Responded to <span class="font-bold text-purple-600 dark:text-fuchsia-300">2 customer reviews</span></p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Trending Products -->
      <div class="bg-lime-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-blue-500 dark:border-orange-400">
        <h3 class="text-2xl font-bold text-blue-700 dark:text-orange-300 mb-4">Trending Products</h3>
        <ul class="space-y-3">
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/198/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Smart Watch X Pro</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">120 units</span></p>
            </div>
          </li>
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/166/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Noise Cancelling Headphones</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">95 units</span></p>
            </div>
          </li>
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/175/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Ergonomic Office Chair</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">78 units</span></p>
            </div>
          </li>
        </ul>
      </div>

    </div>

  </div>
</div>

Composant de comparaison de produits

Un composant de comparaison de produits ludique et convivial pour les produits de sport/fitness, avec des neutres chauds, des éléments arrondis et un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="container mx-auto max-w-6xl">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center mb-8 sm:mb-12 text-stone-800 dark:text-stone-100 leading-tight">
      Choose Your Game-Changer!
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 p-6 sm:p-8 flex flex-col items-center text-center border border-stone-200 dark:border-stone-700">
        <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden mb-6 bg-stone-200 dark:bg-stone-700 flex items-center justify-center p-2">
          <img src="https://picsum.photos/id/1018/300/300" alt="Product A" class="w-full h-full object-cover rounded-full transform hover:scale-105 transition-transform duration-300">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-3">Athlete's Delight</h3>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6 leading-relaxed">
          Perfect for daily workouts and casual jogs. Reliable & comfortable.
        </p>
        <ul class="text-left text-stone-700 dark:text-stone-200 text-base space-y-3 mb-8 w-full max-w-xs">
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg> Lightweight Design</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg> Breathable Fabric</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-red-500 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 0l-2 2a1 1 0 000 1.414l2 2a1 1 0 001.414-1.414L7.414 10l1.293-1.293a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg> Advanced Grip</li>
        </ul>
        <div class="text-4xl font-extrabold text-stone-800 dark:text-stone-100 mb-6">$79.<span class="text-2xl">99</span></div>
        <button class="px-8 py-4 bg-orange-400 hover:bg-orange-500 text-white font-bold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          Select Basic
        </button>
      </div>

      <!-- Product Card 2 (Featured) -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 p-6 sm:p-8 flex flex-col items-center text-center border-4 border-orange-400 dark:border-orange-500 relative transform scale-105 lg:scale-100">
        <span class="absolute top-0 left-1/2 -mt-4 -translate-x-1/2 bg-orange-400 dark:bg-orange-500 text-white text-sm font-bold px-4 py-2 rounded-full shadow-md tracking-wide uppercase">Best Value!</span>
        <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden mb-6 bg-stone-200 dark:bg-stone-700 flex items-center justify-center p-2">
          <img src="https://picsum.photos/id/1025/300/300" alt="Product B" class="w-full h-full object-cover rounded-full transform hover:scale-105 transition-transform duration-300">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-3">Pro Performer</h3>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6 leading-relaxed">
          Engineered for peak performance and competitive sports.
        </p>
        <ul class="text-left text-stone-700 dark:text-stone-200 text-base space-y-3 mb-8 w-full max-w-xs">
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg> Lightweight Design</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg> Breathable Fabric</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg> Advanced Grip</li>
        </ul>
        <div class="text-5xl font-extrabold text-stone-800 dark:text-stone-100 mb-6">$129.<span class="text-3xl">99</span></div>
        <button class="px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-bold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700">
          Go Pro!
        </button>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 p-6 sm:p-8 flex flex-col items-center text-center border border-stone-200 dark:border-stone-700">
        <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden mb-6 bg-stone-200 dark:bg-stone-700 flex items-center justify-center p-2">
          <img src="https://picsum.photos/id/1040/300/300" alt="Product C" class="w-full h-full object-cover rounded-full transform hover:scale-105 transition-transform duration-300">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-3">Elite Champion</h3>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6 leading-relaxed">
          Top-tier choice for professional athletes and serious competitors.
        </p>
        <ul class="text-left text-stone-700 dark:text-stone-200 text-base space-y-3 mb-8 w-full max-w-xs">
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg> Lightweight Design</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg> Breathable Fabric</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg> Advanced Grip</li>
        </ul>
        <div class="text-4xl font-extrabold text-stone-800 dark:text-stone-100 mb-6">$189.<span class="text-2xl">99</span></div>
        <button class="px-8 py-4 bg-orange-400 hover:bg-orange-500 text-white font-bold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          Unlock Elite
        </button>
      </div>

    </div>
  </div>
</div>

LuxuryPaginationComposant

Un composant de pagination élégant et sophistiqué conçu pour la documentation ou les sites wiki, avec une sensation de luxe/premium, une palette de couleurs complémentaire et des éléments interactifs riches. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="flex items-center justify-between p-4 bg-white shadow-xl rounded-xl dark:bg-gray-800 lg:p-6" aria-label="Pagination">
  <div class="flex-1 flex justify-between items-center sm:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
      Previous
    </a>
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 ml-3 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
      Next
    </a>
  </div>
  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300">
        Showing
        <span class="font-medium">1</span>
        to
        <span class="font-medium">10</span>
        of
        <span class="font-medium">97</span>
        results
      </p>
    </div>
    <div>
      <ul class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <li>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            <span class="sr-only">Previous</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
        <li>
          <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:bg-indigo-900 dark:border-indigo-700 dark:text-indigo-300 transition-colors duration-200 ease-in-out">
            1
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            2
          </a>
        </li>
        <li>
          <a href="#" class="hidden md:inline-flex bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            3
          </a>
        </li>
        <li>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
            ...
          </span>
        </li>
        <li>
          <a href="#" class="hidden md:inline-flex bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            8
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            9
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            10
          </a>
        </li>
        <li>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            <span class="sr-only">Next</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Composant de nuage de balises

Un composant de nuage de balises simple, propre et dynamique adapté aux environnements professionnels, spécialement conçu pour les systèmes de réservation. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto font-sans">
  <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mb-6 text-center">Popular Categories & Services</h2>
  <div class="flex flex-wrap justify-center gap-3 sm:gap-4">
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-blue-600 hover:bg-blue-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-700 dark:hover:bg-blue-800">
      Consultation
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-purple-600 hover:bg-purple-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 dark:bg-purple-700 dark:hover:bg-purple-800">
      Meeting
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-green-600 hover:bg-green-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 dark:bg-green-700 dark:hover:bg-green-800">
      Webinar
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-yellow-600 hover:bg-yellow-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-700 dark:hover:bg-yellow-800">
      Workshop
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-red-600 hover:bg-red-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 dark:bg-red-700 dark:hover:bg-red-800">
      Demonstration
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-orange-600 hover:bg-orange-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75 dark:bg-orange-700 dark:hover:bg-orange-800">
      Strategy Session
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-teal-600 hover:bg-teal-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75 dark:bg-teal-700 dark:hover:bg-teal-800">
      Training
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-pink-600 hover:bg-pink-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75 dark:bg-pink-700 dark:hover:bg-pink-800">
      Support Call
    </button>
  </div>
</div>

1 ... 69 70 71 72 73 ... 335

Rechercher des composants

Catégories

Tous les composants