Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de tableau de bord Luxury/Premium Marketplace

Un composant de tableau de bord complexe et réactif pour une place de marché multifournisseur avec un style de design luxueux/haut de gamme. Dispose d’une palette de couleurs bleue d’entreprise professionnelle, d’une typographie sophistiquée et d’une prise en charge du mode sombre. Comprend des sections pour une vue d’ensemble, les ventes récentes, les meilleurs produits et des statistiques rapides.

Ouvrir Aperçu

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8">

  <!-- Header -->
  <header class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 lg:mb-8">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2 sm:mb-0">Vendor Dashboard</h1>
    <div class="flex items-center space-x-3">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-4 pr-10 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm w-40 sm:w-64">
        <svg class="w-5 h-5 text-gray-400 absolute right-3 top-1/2 transform -translate-y-1/2" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <button class="p-2 rounded-full bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
      </button>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
    </div>
  </header>

  <!-- Main Content Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">

    <!-- Quick Stats Cards (Col Span 4 on Lg, 2 on Md) -->
    <div class="lg:col-span-4 md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- Stat Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Total Sales</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">$12,450.75</h3>
        </div>
        <svg class="w-10 h-10 text-blue-500 dark:text-blue-400 opacity-70" 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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
      </div>
      <!-- Stat Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Orders Today</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">58</h3>
        </div>
        <svg class="w-10 h-10 text-green-500 dark:text-green-400 opacity-70" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
      </div>
      <!-- Stat Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">New Customers</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">12</h3>
        </div>
        <svg class="w-10 h-10 text-purple-500 dark:text-purple-400 opacity-70" 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 1.857H10M11 12a4 4 0 11-8 0 4 4 0 018 0zm6 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
      </div>
      <!-- Stat Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Product Views</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">2,104</h3>
        </div>
        <svg class="w-10 h-10 text-orange-500 dark:text-orange-400 opacity-70" 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 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
      </div>
    </div>

    <!-- Recent Sales Chart/Table -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Recent Sales</h2>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order ID</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 text-sm">
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45678</td>
              <td class="px-4 py-4 whitespace-nowrap">Luxury Watch</td>
              <td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$899.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span></td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45677</td>
              <td class="px-4 py-4 whitespace-nowrap">Designer Handbag</td>
              <td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$549.50</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span></td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45676</td>
              <td class="px-4 py-4 whitespace-nowrap">Premium Coffee Maker</td>
              <td class="px-4 py-4 whitespace-nowrap text-yellow-600 dark:text-yellow-400 font-bold">$220.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">Pending</span></td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45675</td>
              <td class="px-4 py-4 whitespace-nowrap">Acoustic Guitar</td>
              <td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$780.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span></td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45674</td>
              <td class="px-4 py-4 whitespace-nowrap">Smart Home Hub</td>
              <td class="px-4 py-4 whitespace-nowrap text-red-600 dark:text-red-400 font-bold">$150.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100">Cancelled</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">View All Sales</a></button>
    </section>

    <!-- Top Selling Products -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Top Selling Products</h2>
      <div class="space-y-4">
        <!-- Product Item 1 -->
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=1" alt="Watch" class="w-20 h-20 rounded-lg object-cover shadow-sm">
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-gray-100">Luxury Swiss Watch</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>150</span> units</p>
            <p class="text-blue-700 dark:text-blue-300 font-bold">$899.00</p>
          </div>
          <button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg></button>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Product Item 2 -->
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=2" alt="Handbag" class="w-20 h-20 rounded-lg object-cover shadow-sm">
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-gray-100">Italian Leather Handbag</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>120</span> units</p>
            <p class="text-blue-700 dark:text-blue-300 font-bold">$549.50</p>
          </div>
          <button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg></button>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Product Item 3 -->
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=3" alt="Camera" class="w-20 h-20 rounded-lg object-cover shadow-sm">
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-gray-100">Professional DSLR Camera</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>90</span> units</p>
            <p class="text-blue-700 dark:text-blue-300 font-bold">$1,200.00</p>
          </div>
          <button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg></button>
        </div>
      </div>
      <button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">Manage Products</a></button>
    </section>

    <!-- Customer Reviews / Feedback -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Customer Feedback</h2>
      <div class="space-y-5">
        <!-- Review 1 -->
        <div class="flex items-start space-x-4">
          <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Emily R.</p>
            <div class="flex items-center text-yellow-500 text-sm mb-1">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">"Absolutely love the quality of products! Fast shipping and excellent customer service. Highly recommend this marketplace."</p>
          </div>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Review 2 -->
        <div class="flex items-start space-x-4">
          <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">David S.</p>
            <div class="flex items-center text-yellow-500 text-sm mb-1">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">"Great platform for unique items. Had a slight issue with delivery but customer support resolved it quickly and professionally."</p>
          </div>
        </div>
      </div>
      <button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">Read All Reviews</a></button>
    </section>

    <!-- To-Do List -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">To-Do List</h2>
      <div class="space-y-4">
        <!-- Task 1 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
          <span class="text-gray-800 dark:text-gray-200 text-base">Respond to customer inquiries</span>
        </label>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Task 2 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500" checked>
          <span class="text-gray-500 dark:text-gray-400 text-base line-through">Update product listings photos</span>
        </label>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Task 3 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
          <span class="text-gray-800 dark:text-gray-200 text-base">Prepare monthly sales report</span>
        </label>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Task 4 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
          <span class="text-gray-800 dark:text-gray-200 text-base">Plan next marketing campaign</span>
        </label>
      </div>
      <button class="mt-6 w-full py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors duration-200 font-semibold"><a href="#">Add New Task</a></button>
    </section>

  </div>

</div>

Composant Notifications

Un composant de notifications complexe et réactif conçu avec les principes de Material Design, des couleurs neutres froides et la prise en charge du mode sombre, adapté à un portfolio pour présenter des éléments interactifs et des effets de profondeur.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">
    <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Notifications</h2>
            <div class="flex space-x-2">
                <button class="px-4 py-2 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
                    Mark all as read
                </button>
                <button class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="divide-y divide-gray-200 dark:divide-gray-700">
            <!-- Notification Item 1 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-blue-50 dark:bg-gray-800/50 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
                    <span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-blue-500"></span>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="font-bold">Alice Johnson</span> commented on your <span class="text-blue-600 dark:text-blue-400 font-medium">post</span>.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">2h ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        "Great insights! I particularly liked your point about the new design trends..."
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-blue-600 dark:text-blue-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Reply</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Dismiss</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 2 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <div class="h-12 w-12 rounded-full bg-green-500 flex items-center justify-center shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            Your portfolio project <span class="text-indigo-600 dark:text-indigo-400 font-medium">'Modern Dashboard'</span> was approved!
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        Congratulations! Your project is now live and visible to the community.
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">View Project</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">Share</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 3 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="font-bold">Sarah Lee</span> sent you a <span class="text-purple-600 dark:text-purple-400 font-medium">private message</span>.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">3 days ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        "Hi! I saw your work on the Material Design component and wanted to ask about..."
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-purple-600 dark:text-purple-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">View Message</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">Archive</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 4 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <div class="h-12 w-12 rounded-full bg-red-500 flex items-center justify-center shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="text-red-600 dark:text-red-400 font-medium">Warning:</span> Some assets failed to load for 'Photography Showcase'.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">5 days ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        Please check the console for more details. This might affect the display of your project.
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-red-600 dark:text-red-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Resolve Issue</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Ignore</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 5 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out last:rounded-b-lg">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://picsum.photos/id/1005/60/60" alt="System Icon">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            New <span class="text-cyan-600 dark:text-cyan-400 font-medium">feature update</span> available for the editor.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">1 week ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        We've added new collaboration tools and improved performance. Update now to experience!
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-cyan-600 dark:text-cyan-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Learn More</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Dismiss</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Dashboard_Weather_Climate_Swiss

Un composant complexe et réactif du tableau de bord météo et climatique inspiré de la typographie suisse/internationale, utilisant des tons de terre et prenant en charge le mode sombre. Dispose de plusieurs points de données tels que la météo actuelle, les prévisions, la qualité de l’air et les tendances climatiques.

Ouvrir Aperçu

                <div class="min-h-screen bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <header class="mb-8 sm:mb-10 lg:mb-12">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-stone-900 dark:text-stone-100 tracking-tight mb-2">
      Climate Dashboard
    </h1>
    <p class="text-lg sm:text-xl text-stone-600 dark:text-stone-400">Comprehensive Weather & Climate Insights</p>
  </header>

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

    <!-- Current Weather Card -->
    <section class="md:col-span-2 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col justify-between overflow-hidden relative">
      <div class="absolute top-0 left-0 w-full h-full bg-cover bg-center opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/weather_current/1200/800');"></div>
      <div class="relative z-10">
        <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Current Conditions</h2>
        <div class="flex items-center justify-between flex-wrap gap-4 mb-6">
          <div class="flex items-center gap-4">
            <img src="https://openweathermap.org/img/wn/04d.png" alt="Cloudy" class="w-16 h-16 sm:w-20 sm:h-20">
            <div>
              <p class="text-5xl sm:text-6xl font-bold text-stone-900 dark:text-stone-100">22°C</p>
              <p class="text-xl text-stone-700 dark:text-stone-300">Partly Cloudy</p>
            </div>
          </div>
          <div class="text-right">
            <p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Humidity:</span> 65%</p>
            <p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Wind:</span> 12 km/h NE</p>
            <p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Pressure:</span> 1012 hPa</p>
          </div>
        </div>
        <p class="text-md text-stone-600 dark:text-stone-400">Updated: Just now</p>
        <p class="mt-2 text-md font-medium text-stone-700 dark:text-stone-300">Location: Zurich, Switzerland</p>
      </div>
    </section>

    <!-- 5-Day Forecast Card -->
    <section class="md:col-span-1 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg overflow-hidden">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">5-Day Forecast</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-5 gap-4">
        <!-- Day 1 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Today</p>
          <img src="https://openweathermap.org/img/wn/04d.png" alt="Clouds" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">24° / 15°</p>
        </div>
        <!-- Day 2 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Tomorrow</p>
          <img src="https://openweathermap.org/img/wn/01d.png" alt="Sun" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">26° / 16°</p>
        </div>
        <!-- Day 3 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Thu</p>
          <img src="https://openweathermap.org/img/wn/10d.png" alt="Rain" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">20° / 13°</p>
        </div>
        <!-- Day 4 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Fri</p>
          <img src="https://openweathermap.org/img/wn/03d.png" alt="Partly Clouds" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">21° / 14°</p>
        </div>
        <!-- Day 5 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Sat</p>
          <img src="https://openweathermap.org/img/wn/02d.png" alt="Few Clouds" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">23° / 15°</p>
        </div>
      </div>
    </section>

    <!-- Climate Trends Card -->
    <section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Climate Trends</h2>
      <div class="space-y-4">
        <div>
          <p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Average Temperature</p>
          <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
            <div class="bg-amber-600 h-2.5 rounded-full" style="width: 70%;"></div>
          </div>
          <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+0.8°C vs. Historical Average</p>
        </div>
        <div>
          <p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Precipitation Anomaly</p>
          <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 60%;"></div>
          </div>
          <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">-15% vs. Historical Average</p>
        </div>
        <div>
          <p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Extreme Weather Events</p>
          <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
            <div class="bg-red-600 h-2.5 rounded-full" style="width: 40%;"></div>
          </div>
          <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+5% Increase Annually</p>
        </div>
      </div>
      <button class="mt-6 w-full py-2 px-4 bg-lime-700 hover:bg-lime-800 dark:bg-lime-600 dark:hover:bg-lime-700 text-white font-medium rounded-lg transition-colors">
        View Full Report
      </button>
    </section>

    <!-- Air Quality Index Card -->
    <section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Air Quality Index (AQI)</h2>
      <div class="flex items-center justify-between mb-4 flex-grow">
        <div class="text-center flex-1">
          <p class="text-5xl font-bold text-emerald-600 dark:text-emerald-400">45</p>
          <p class="text-lg text-emerald-700 dark:text-emerald-300">Good</p>
        </div>
        <div class="text-left flex-1 pl-4 border-l border-stone-200 dark:border-stone-700">
          <p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">PM2.5:</span> 12 µg/m³</p>
          <p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">Ozone:</span> 35 ppb</p>
          <p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">NO2:</span> 5 ppb</p>
        </div>
      </div>
      <p class="text-sm text-stone-600 dark:text-stone-400 text-center mt-2">Data from local monitoring station</p>
    </section>

    <!-- Global Anomalies Card -->
    <section class="md:col-span-3 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Global Anomalies & Alerts</h2>
      <ul class="space-y-4">
        <li class="flex items-start gap-3">
          <span class="text-red-500 text-2xl">&#9888;</span>
          <div>
            <p class="font-medium text-stone-800 dark:text-stone-200">Heatwave warning for Southern Europe</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Temperatures expected to exceed 40°C for next 7 days.</p>
          </div>
        </li>
        <li class="flex items-start gap-3">
          <span class="text-blue-500 text-2xl">&#x2139;</span>
          <div>
            <p class="font-medium text-stone-800 dark:text-stone-200">Increased Arctic ice melt observed</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Satellite data shows record low sea ice extent for the season.</p>
          </div>
        </li>
        <li class="flex items-start gap-3">
          <span class="text-yellow-500 text-2xl">&#9937;</span>
          <div>
            <p class="font-medium text-stone-800 dark:text-stone-200">Pacific Ocean SST trending towards El Niño</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Potential for altered global weather patterns in coming months.</p>
          </div>
        </li>
      </ul>
    </section>

  </div>

  <footer class="mt-10 pt-6 border-t border-stone-300 dark:border-stone-700 text-center text-stone-600 dark:text-stone-400 text-sm">
    <p>&copy; 2023 Climate Insights. All rights reserved.</p>
  </footer>

</div>

360_viewer_component

Un composant complexe, dynamique et skeuomorphe de visualisation de produits à 360 degrés pour la mode/beauté, entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 flex items-center justify-center p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
  <div class="relative w-full max-w-4xl bg-gradient-to-br from-purple-300 via-pink-300 to-yellow-300 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-800 rounded-3xl shadow-2xl p-8 transform transition-all duration-300 hover:scale-[1.01] overflow-hidden border-2 border-purple-400 dark:border-purple-700">
    <!-- 'Glass' inset effect -->
    <div class="absolute inset-4 -m-2 rounded-2xl bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm shadow-inner-lg dark:bg-black dark:bg-opacity-20"></div>

    <div class="relative z-10 flex flex-col lg:flex-row gap-8">
      <!-- Product Image / 360 Viewer Area -->
      <div class="flex-1 lg:w-3/5 relative bg-white dark:bg-gray-700 rounded-2xl shadow-xl overflow-hidden p-4 group">
        <img src="https://picsum.photos/600/600?random=1" alt="360 Product View" class="w-full h-full object-contain rounded-xl transition-transform duration-500 group-hover:scale-105">
        <!-- 360 degree indicator disc -->
        <div class="absolute bottom-4 right-4 bg-purple-600 dark:bg-purple-900 rounded-full w-16 h-16 flex items-center justify-center shadow-lg transform group-hover:rotate-180 transition-transform duration-700">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M9.546 1.046a.5.5 0 01.908 0l2 3.5a.5.5 0 01-.454.704H7.992a.5.5 0 01-.454-.704l2-3.5zM12.93 16.924a.5.5 0 01.707 0l2 2a.5.5 0 01.011.707l-2 2a.5.5 0 01-.707-.011l-1.92-1.92-1.92 1.92A.5.5 0 018.069 20a.5.5 0 01-.011.707l-2-2a.5.5 0 01-.707-.011l-2-2a.5.5 0 01.707-.707L5 17.062V13.5a.5.5 0 011 0v3.562l1.93-1.93a.5.5 0 01.707 0l2 2z" clip-rule="evenodd"></path>
          </svg>
           <span class="absolute text-xs text-white -bottom-4">360°</span>
        </div>

        <!-- Skeuomorphic controls (dials/buttons) -->
        <div class="absolute bottom-4 left-4 flex space-x-2">
          <button class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 active:from-green-600 active:to-blue-700 text-white rounded-full flex items-center justify-center shadow-md border-2 border-green-300 dark:border-green-800 transform active:scale-95 transition-all duration-100">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="w-12 h-12 bg-gradient-to-br from-orange-400 to-red-500 hover:from-orange-500 hover:to-red-600 active:from-orange-600 active:to-red-700 text-white rounded-full flex items-center justify-center shadow-md border-2 border-orange-300 dark:border-orange-800 transform active:scale-95 transition-all duration-100">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 15.707a1 1 0 010-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Product Details & Options -->
      <div class="flex-1 lg:w-2/5 flex flex-col gap-6">
        <!-- Product Title & Price -->
        <div class="bg-white dark:bg-gray-700 rounded-2xl p-6 shadow-xl border-2 border-pink-400 dark:border-pink-700">
          <h2 class="text-4xl lg:text-5xl font-extrabold text-purple-800 dark:text-purple-300 mb-2 drop-shadow-md">Radiant Glow Elixir</h2>
          <p class="text-2xl font-bold text-pink-600 dark:text-pink-400">$99.00</p>
        </div>

        <!-- Color Options (Skeuomorphic buttons) -->
        <div class="bg-white dark:bg-gray-700 rounded-2xl p-6 shadow-xl border-2 border-yellow-400 dark:border-yellow-700">
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Choose Shade:</h3>
          <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            <button class="w-14 h-14 bg-red-400 rounded-full shadow-md border-4 border-transparent hover:border-red-600 dark:hover:border-red-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-teal-400 rounded-full shadow-md border-4 border-transparent hover:border-teal-600 dark:hover:border-teal-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-blue-400 rounded-full shadow-md border-4 border-transparent hover:border-blue-600 dark:hover:border-blue-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-yellow-400 rounded-full shadow-md border-4 border-transparent hover:border-yellow-600 dark:hover:border-yellow-900 transform transition-all duration-200 active:scale-90 relative selected">
              <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
              <span class="absolute inset-0 ring-4 ring-yellow-500 dark:ring-yellow-400 rounded-full"></span>
            </button>
            <button class="w-14 h-14 bg-purple-400 rounded-full shadow-md border-4 border-transparent hover:border-purple-600 dark:hover:border-purple-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
          </div>
        </div>

        <!-- Add to Cart Button -->
        <button class="w-full bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 active:from-green-700 active:to-blue-800 text-white font-extrabold text-2xl py-4 rounded-full shadow-2xl skew-y-1 hover:skew-y-0 transform transition-all duration-300 border-4 border-green-400 dark:border-green-700 dark:text-blue-200">
          <span class="drop-shadow-md">ADD TO BAG</span>
        </button>
      </div>
    </div>

    <!-- Decorative light/shadow effects for skeuomorphism -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-white bg-opacity-30 rounded-full transform -translate-x-1/2 -translate-y-1/2 blur-2xl opacity-60 pointer-events-none dark:hidden"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-pink-400 bg-opacity-30 rounded-full transform translate-x-1/2 translate-y-1/2 blur-2xl opacity-60 pointer-events-none dark:hidden"></div>
  </div>
</div>

Composant de comparaison de produits

Un composant simple et ludique de comparaison de produits conçu avec des couleurs d’automne, adapté à la documentation ou aux sites wiki. Dispose d’éléments arrondis, d’une réactivité totale et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-orange-50 dark:bg-stone-900 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-200 mb-2">Compare Our Fun Features!</h2>
      <p class="text-orange-600 dark:text-orange-300 text-base sm:text-lg">See how our playful products stack up.</p>
    </div>

    <div class="flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-orange-200 dark:divide-stone-700">

      <!-- Product 1 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center">
        <h3 class="text-xl sm:text-2xl font-bold text-orange-700 dark:text-orange-300 mb-4">Happy Widget 🥳</h3>
        <img src="https://picsum.photos/300/200?random=1" alt="Happy Widget" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">
        
        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Simple Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Playful Interface</li>
          <li class="flex items-center justify-center"><span class="text-red-500 mr-2 text-lg">&#10007;</span> Advanced Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Friendly Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-orange-900 dark:text-orange-100 mb-6">$19<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-orange-500 text-white font-semibold rounded-full shadow-lg hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition duration-300 ease-in-out">Choose Happy!</a>
      </div>

      <!-- Product 2 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center bg-orange-50 dark:bg-stone-700">
        <h3 class="text-xl sm:text-2xl font-bold text-burgundy-900 dark:text-burgundy-100 mb-4">Super Gizmo ✨</h3>
        <img src="https://picsum.photos/300/200?random=2" alt="Super Gizmo" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">

        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Quick Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Robust Interface</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Powerful Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Premium Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-burgundy-900 dark:text-burgundy-100 mb-6">$39<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-burgundy-600 text-white font-semibold rounded-full shadow-lg hover:bg-burgundy-700 focus:outline-none focus:ring-4 focus:ring-burgundy-300 dark:focus:ring-burgundy-700 transition duration-300 ease-in-out">Get Gizmo Fun!</a>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700 border-t border-orange-200 dark:border-stone-600">
      <p class="text-orange-700 dark:text-orange-300 text-sm sm:text-base">Need more details? Check out our <a href="#" class="font-semibold underline hover:text-orange-800 dark:hover:text-orange-200">full feature list</a>!</p>
    </div>

  </div>
</div>

Composant Cartes thermiques

Un composant de carte thermique réactif pour un portfolio, conçu avec un arrière-plan sombre et des couleurs vives à haute saturation pour réduire la fatigue oculaire et créer de l’énergie. Comprend une grille de type calendrier pour visualiser l’activité, des info-bulles interactives (bien que la fonctionnalité ne soit pas implémentée selon la règle « pas de JavaScript », un espace réservé visuel est présent) et une légende de couleur.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-950 text-gray-100 p-4 sm:p-6 md:p-8 dark:bg-gray-950 dark:text-gray-100">
  <div class="max-w-6xl mx-auto bg-gray-900 rounded-xl shadow-2xl overflow-hidden md:flex dark:bg-gray-900">
    <div class="p-6 sm:p-8 md:p-10 flex-grow">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-cyan-400 mb-2 dark:text-cyan-400">Activity Heatmap</h2>
      <p class="text-gray-400 text-lg sm:text-xl mb-8 dark:text-gray-400">Visualizing my commitment and contributions over time.</p>

      <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-6">
        <div class="flex items-center space-x-4 mb-4 md:mb-0">
          <span class="text-gray-400 text-sm sm:text-base">Last 12 Months</span>
          <div class="relative inline-block text-gray-100">
            <select class="block appearance-none w-full bg-gray-800 border border-gray-700 hover:border-gray-600 px-4 py-2 pr-8 rounded-lg shadow leading-tight focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-600">
              <option>2023</option>
              <option>2022</option>
              <option>2021</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
            </div>
          </div>
        </div>
        <div class="flex space-x-2 text-gray-400 text-sm sm:text-base">
          <span>Less</span>
          <div class="w-4 h-4 rounded-sm bg-gray-700 dark:bg-gray-700"></div>
          <div class="w-4 h-4 rounded-sm bg-purple-900 dark:bg-purple-900"></div>
          <div class="w-4 h-4 rounded-sm bg-purple-700 dark:bg-purple-700"></div>
          <div class="w-4 h-4 rounded-sm bg-fuchsia-600 dark:bg-fuchsia-600"></div>
          <div class="w-4 h-4 rounded-sm bg-pink-500 dark:bg-pink-500"></div>
          <span>More</span>
        </div>
      </div>

      <div class="overflow-x-auto pb-4">
        <div class="grid grid-cols-53 gap-1 min-w-[700px]">
          <!-- Month Labels (approximate placement) -->
          <div class="col-span-2"></div>
          <div class="col-span-4 text-center text-xs text-gray-400">Jan</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Feb</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Mar</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Apr</div>
          <div class="col-span-4 text-center text-xs text-gray-400">May</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Jun</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Jul</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Aug</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Sep</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Oct</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Nov</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Dec</div>
          <div class="col-span-1"></div>

          <!-- Days of Week Labels -->
          <div class="text-right text-xs text-gray-400 pr-2">Mon</div>
          <!-- Grid cells (52 weeks for full year + buffer for alignment, 7 days per week) -->
          <!-- Generating 52 weeks * 7 days = 364 cells + 7 day labels -->
          <div class="col-span-52 grid grid-cols-52 gap-1">
            <!-- Placeholder for 52 columns of days -->
            <!-- Example week 1 (vertical column) -->
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-gray-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-gray-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">No activity</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-purple-900 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-purple-900"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">1 contribution</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-purple-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-purple-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">5 contributions</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-fuchsia-600 transition-colors duration-200 dark:bg-fuchsia-600 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">10 contributions</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-pink-500 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-pink-500"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">20+ contributions</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-gray-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-gray-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">No activity</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-purple-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-purple-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">4 contributions</span>
            </div>
            
            <!-- Fill the rest with randomly colored cells for demonstration -->
            <!-- Due to the 52 column structure, we need 52 * 7 cells. -->
            <!-- We've already added 7 specific ones for example. Need 357 more. -->
            <!-- In a real scenario, this would be dynamically generated. -->
            <!-- For the purpose of this component, we'll put a representative number of cells -->
            <!-- to simulate the full grid within Tailwind's capabilities. -->
            
            <!-- This loop is conceptual and needs manual expansion for the 52x7 grid -->
            <!-- Using 364 total cells to simulate a year -->
            <!-- I will generate a slice of cells for demonstration -->
            <!-- The actual number of cells is 52*7 = 364 -->
            
            <style>
                /* Tailwind's JIT mode handles arbitrary values like grid-cols-53. */
                /* For dynamic values like this, ensure your Tailwind config's safelist includes patterns if not using JIT or if for older versions. */
                /* Or, simply use explicit classes like grid-cols-[repeat(52,minmax(0,1fr))] */
                .grid-cols-53 {
                    grid-template-columns: repeat(53, minmax(0, 1fr));
                }
            </style>

            <!-- Loop for 51 more 'weeks' (51*7 = 357 cells) -->
            <!-- Randomly select a color class -->
            <!-- Keep this concise for the JSON output -->
            <!-- Example of dynamic generation, shortened for brevity here -->
            <!-- Total cells needed 364 (52 weeks * 7 days) -->
            <!-- Here we will approximate for demonstration, not generate all 364. -->
            <!-- We'll fill up to a significant portion that shows the layout. -->
            
            <!-- Example of ~6 weeks (42 cells) to show the pattern spread out: -->
            ${(() => {
                const colors = ['bg-gray-700', 'bg-purple-900', 'bg-purple-700', 'bg-fuchsia-600', 'bg-pink-500'];
                let cells = '';
                for (let i = 0; i < (52 * 7 - 7); i++) { // Fill the rest of the 364 cells (minus the 7 already placed)
                    const colorClass = colors[Math.floor(Math.random() * colors.length)];
                    const contributionText = colorClass === 'bg-gray-700' ? 'No activity' : `${Math.floor(Math.random() * 20) + 1} contributions`;
                    cells += `
                        <div class="w-4 h-4 rounded-sm ${colorClass} relative cursor-pointer group transition-colors duration-200 transform group-hover:scale-110 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:hover:ring-cyan-500">
                            <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-black/70 text-xs text-white rounded shadow-md whitespace-nowrap z-10">${contributionText}</span>
                        </div>
                    `;
                }
                return cells;
            })()}
          </div>

          <!-- Day labels for vertical axis -->
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Tue</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Wed</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Thu</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Fri</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Sat</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Sun</div>
          <div class="col-span-52"></div>

        </div>
      </div>

      <p class="text-right text-gray-500 text-sm mt-4 dark:text-gray-500">Last updated: Jan 1, 2024</p>
    </div>
  </div>
</div>

Volet Forum communautaire

Un composant simple de forum communautaire sur le thème cyberpunk pour les plateformes immobilières, avec des arrière-plans sombres, des accents néon et un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-gray-950 text-gray-100 dark:bg-black p-4 sm:p-6 lg:p-8 rounded-lg shadow-lg border border-purple-800 dark:border-pink-700 max-w-4xl mx-auto neon-shadow">
  <h2 class="text-2xl sm:text-3xl font-bold text-teal-400 dark:text-lime-400 mb-6 text-center tracking-wide uppercase leading-tight">
    <span class="block">CYBERPUNK CONCLAVE</span>
    <span class="block text-lg text-purple-400 dark:text-pink-400">// REAL ESTATE MATRIX //</span>
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <div class="bg-opacity-20 bg-blue-700 dark:bg-purple-700 p-4 rounded-md border border-b-2 border-blue-500 dark:border-purple-500 hover:border-blue-300 dark:hover:border-purple-300 transition-colors duration-300">
      <h3 class="text-xl font-semibold text-blue-300 dark:text-purple-300 mb-2 ">Discussion Channels</h3>
      <ul class="space-y-2 text-sm">
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          General Property Chatter
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Investment Strategies
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Market Trends & Predictions
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Legal & Compliance
        </li>
      </ul>
    </div>

    <div class="bg-opacity-20 bg-purple-700 dark:bg-blue-700 p-4 rounded-md border border-b-2 border-purple-500 dark:border-blue-500 hover:border-purple-300 dark:hover:border-blue-300 transition-colors duration-300">
      <h3 class="text-xl font-semibold text-purple-300 dark:text-blue-300 mb-2">Featured Threads</h3>
      <ul class="space-y-3 text-sm">
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "Optimized Smart Homes of 2077" <span class="text-xs text-gray-400">by DataGhost</span>
          </a>
        </li>
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "Neo-Tokyo District Price Forecast" <span class="text-xs text-gray-400">by Synthia_X</span>
          </a>
        </li>
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "AI-Powered Property Management" <span class="text-xs text-gray-400">by CyberBroker</span>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="flex flex-col sm:flex-row justify-between items-center bg-opacity-20 bg-gray-700 dark:bg-gray-800 p-4 rounded-md border border-gray-600 dark:border-gray-700">
    <p class="mb-4 sm:mb-0 text-sm text-gray-300 dark:text-gray-400">
      <span class="text-teal-400 dark:text-lime-400">1,245 Members Active</span> // 42 New Posts Today
    </p>
    <button class="flex items-center px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 dark:from-pink-600 dark:to-fuchsia-600 text-white rounded-full font-semibold 
                   shadow-lg hover:shadow-cyan-500/50 dark:hover:shadow-lime-500/50 transition-all duration-300 
                   transform hover:-translate-y-0.5 glow-button">
      <svg class="w-5 h-5 mr-2" 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 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
      NEW THREAD
    </button>
  </div>

  <style>
    /* This is for the 'neon-shadow' and 'glow-button' effects */
    .neon-shadow {
      box-shadow: 
        0 0 5px rgba(59, 130, 246, 0.7),
        0 0 10px rgba(168, 85, 247, 0.7),
        0 0 15px rgba(59, 130, 246, 0.5),
        0 0 20px rgba(168, 85, 247, 0.5);
    }

    .dark .neon-shadow {
      box-shadow: 
        0 0 5px rgba(236, 72, 153, 0.7),
        0 0 10px rgba(139, 92, 246, 0.7),
        0 0 15px rgba(236, 72, 153, 0.5),
        0 0 20px rgba(139, 92, 246, 0.5);
    }

    .glow-button {
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .glow-button:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(59, 130, 246, 0.6) 0%, rgba(168, 85, 247, 0.6) 100%);
      mix-blend-mode: overlay;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .dark .glow-button:before {
      background: linear-gradient(45deg, rgba(236, 72, 153, 0.6) 0%, rgba(139, 92, 246, 0.6) 100%);
    }

    .glow-button:hover:before {
      opacity: 1;
    }

    .glow-button:active {
      transform: scale(0.98);
      box-shadow: none;
    }
  </style>
</div>

Galerie de produits e-commerce

Un composant de galerie de produits minimaliste et réactif pour le commerce électronique, avec des tons océan/bleu, la prise en charge du mode sombre et l’affichage interactif des images.

Ouvrir Aperçu

                <div class="bg-blue-50 dark:bg-gray-900 py-8 sm:py-12">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center">
      Featured Products
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1015/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Wave Speaker</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Immersive sound experience</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$129.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1041/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Azure Comfort Cushion</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Soft & elegant seating</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$39.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1025/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Deep Sea Watch</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Water-resistant smart device</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$249.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1053/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Sky Blue Backpack</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Lightweight & durable</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$79.50</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1063/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Coral Reef Artwork</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Vibrant wall decor</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$189.00</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1070/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Breeze Diffuser</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Relaxing aromatherapy</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$49.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 7 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1084/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Nautical Compass Mug</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">For your morning brew</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$18.75</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 8 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1018/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Aqua Fitness Bottle</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Stay hydrated in style</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$22.00</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

E-commerce Automne Dark Loader

Un composant de chargeur réactif pour les applications de commerce électronique, avec des couleurs d’automne sur un fond sombre, conçu pour réduire la fatigue oculaire. Comprend trois animations de chargeur distinctes.

Ouvrir Aperçu

                <div class="flex min-h-screen items-center justify-center bg-gray-950 p-4 dark:bg-gray-50">
  <div class="w-full max-w-4xl rounded-lg bg-gray-900 p-8 shadow-xl dark:bg-zinc-100 md:p-12">
    <h2 class="mb-8 text-center font-serif text-3xl font-bold text-orange-400 dark:text-orange-700 md:text-4xl">
      Processing Your Order...
    </h2>
    <p class="mb-10 text-center text-lg text-brown-300 dark:text-brown-700">
      Please wait a moment while we prepare your items for shipment. Your patience is appreciated.
    </p>

    <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">

      <!-- Loader 1: Spinning Circle -->
      <div class="flex flex-col items-center">
        <div class="relative flex h-24 w-24 items-center justify-center rounded-full border-4 border-brown-600 dark:border-brown-300">
          <div class="h-full w-full animate-spin-slow rounded-full border-4 border-l-transparent border-t-transparent border-orange-500 dark:border-orange-600"></div>
          <div class="absolute text-lg font-semibold text-brown-400 dark:text-brown-700">Loading</div>
        </div>
        <p class="mt-4 text-center text-md text-orange-300 dark:text-orange-800">Confirming Details</p>
      </div>

      <!-- Loader 2: Pulsing Dots -->
      <div class="flex flex-col items-center">
        <div class="flex h-24 w-min items-end justify-center">
          <span class="m-1 h-4 w-4 animate-pulse rounded-full bg-orange-600 dark:bg-orange-800" style="animation-delay: 0s;"></span>
          <span class="m-1 h-4 w-4 animate-pulse rounded-full bg-brown-500 dark:bg-brown-700" style="animation-delay: 0.2s;"></span>
          <span class="m-1 h-4 w-4 animate-pulse rounded-full bg-burgundy-600 dark:bg-burgundy-800" style="animation-delay: 0.4s;"></span>
        </div>
        <p class="mt-4 text-center text-md text-orange-300 dark:text-orange-800">Verifying Stock</p>
      </div>

      <!-- Loader 3: Horizontal Bar Progress -->
      <div class="flex flex-col items-center">
        <div class="relative h-6 w-full max-w-sm overflow-hidden rounded-full bg-brown-700 dark:bg-brown-300">
          <div class="h-full animate-progress-bar rounded-full bg-orange-500 dark:bg-orange-600"></div>
          <div class="absolute inset-0 flex items-center justify-center text-xs font-bold text-white dark:text-gray-900">75%</div>
        </div>
        <p class="mt-4 text-center text-md text-orange-300 dark:text-orange-800">Preparing Shipment</p>
      </div>

    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-flex items-center rounded-md bg-orange-600 px-6 py-3 font-semibold text-white transition duration-300 ease-in-out hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-900 dark:bg-orange-700 dark:hover:bg-orange-800 dark:focus:ring-offset-zinc-100">
        <svg class="-ml-1 mr-2 h-5 w-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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 15v1m7 4h2.586a1 1 0 00.707-.293l3.414-3.414a1 1 0 000-1.414L15.414 10a1 1 0 00-1.414 0L10.586 13a1 1 0 000 1.414l3.414 3.414a1 1 0 00.707.293H19"></path></svg>
        Return to Cart
      </a>
    </div>

  </div>
</div>

<style>
  /* Custom colors for autumn theme */
  .text-brown-300 { color: #d4a77d; }
  .dark\:text-brown-700 { color: #965f3f; }
  .text-brown-400 { color: #bf8f6b; }
  .dark\:text-brown-700 { color: #965f3f; } /* Re-affirming for dark mode */
  .border-brown-600 { border-color: #a0522d; }
  .dark\:border-brown-300 { border-color: #d4a77d; }
  .bg-brown-500 { background-color: #a0522d; }
  .dark\:bg-brown-700 { background-color: #965f3f; }
  .bg-brown-700 { background-color: #6c3f1f; }
  .dark\:bg-brown-300 { background-color: #d4a77d; }
  .bg-burgundy-600 { background-color: #800020; }
  .dark\:bg-burgundy-800 { background-color: #5d0016; }
  .text-orange-300 { color: #fdbb74; }
  .dark\:text-orange-800 { color: #9a4800; }
  .text-orange-400 { color: #fb923c; }
  .dark\:text-orange-700 { color: #c2410c; }

  /* Keyframes for animations */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes progress-bar {
    0% { width: 0%; }
    100% { width: 75%; } /* Fixed at 75% for this example */
  }

  /* Tailwind utility classes for custom animations */
  .animate-spin-slow {
    animation: spin-slow 2s linear infinite;
  }
  .animate-progress-bar {
    animation: progress-bar 2s ease-out forwards; /* Plays once, stays at 75% */
  }
</style>

Ajouter au panier Composant du bouton

Un composant de bouton « Ajouter au panier » de couleur pastel inspiré de la nature, conçu pour les applications médicales/de santé, avec des lignes fluides et un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex justify-center items-center p-4 bg-gradient-to-br from-fuchsia-50 to-purple-50 dark:from-purple-950 dark:via-fuchsia-950 dark:to-teal-950 min-h-screen">
  <button class="relative flex items-center justify-center py-3 px-8 text-lg font-semibold text-fuchsia-800 bg-gradient-to-r from-fuchsia-200 via-rose-100 to-purple-200 rounded-full shadow-lg overflow-hidden transition-all duration-300 ease-in-out
                   dark:from-fuchsia-800 dark:via-rose-700 dark:to-purple-800 dark:text-fuchsia-50 dark:shadow-xl dark:shadow-fuchsia-900/50
                   hover:scale-105 hover:shadow-xl hover:shadow-fuchsia-300/60 dark:hover:shadow-fuchsia-700/70
                   focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700
                   active:scale-95">
    <span class="relative z-10 flex items-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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M16 16h.01"></path>
      </svg>
      <span>Add to Cart</span>
    </span>
    <div class="absolute inset-0 bg-gradient-to-r from-fuchsia-100 via-rose-50 to-purple-100 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100
                dark:from-fuchsia-700 dark:via-rose-600 dark:to-purple-700"></div>

    <!-- Nature-inspired flowing lines overlay -->
    <svg class="absolute inset-0 w-full h-full opacity-30 pointer-events-none transform scale-150 transition-transform duration-500 ease-in-out group-hover:scale-100
                dark:opacity-10 dark:text-fuchsia-300" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d="M0 50 C 25 20, 75 80, 100 50 L 100 100 L 0 100 Z" fill="currentColor" class="text-fuchsia-300/50 dark:text-fuchsia-600/50"></path>
      <path d="M0 60 C 20 90, 80 10, 100 40 V 100 H 0 Z" fill="currentColor" class="text-purple-300/50 dark:text-purple-600/50"></path>
    </svg>
  </button>
</div>

1 ... 8 9 10 11 12 ... 335

Rechercher des composants

Catégories

Tous les composants