Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de comparaison de produits

Un composant de comparaison de produits complexe et réactif avec des éléments de conception 3D, une palette de couleurs triadique et la prise en charge du mode sombre, adapté au contexte d’un tableau de bord.

Ouvrir Aperçu

                <div class="bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 min-h-screen p-4 sm:p-8 lg:p-12 font-sans dark:from-gray-900 dark:to-black dark:via-gray-800 text-gray-800 dark:text-gray-200">

  <!-- Component Title -->
  <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 relative z-10 animate-fade-in-down transform scale-y-105 transition-transform duration-500 hover:scale-y-100
    bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600
    dark:from-purple-400 dark:via-pink-300 dark:to-indigo-400
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-purple-200 before:via-pink-100 before:to-indigo-200 before:blur-lg before:-z-10 before:opacity-50 dark:before:from-gray-700 dark:before:via-gray-800 dark:before:to-gray-900">
    Product Comparison
  </h1>

  <!-- Comparison Grid Container -->
  <div class="grid gap-8 lg:gap-12 xl:grid-cols-3 max-w-7xl mx-auto">

    <!-- Product Card 1 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-purple-400
      dark:from-gray-800 dark:to-gray-900 dark:border-purple-600
      after:content-[''] after:absolute after:inset-0 after:bg-purple-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-purple-500 to-indigo-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        Popular Choice
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product1/250/180" alt="Product A" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Product Alpha</h2>
        <p class="text-gray-600 dark:text-gray-400">Cutting-edge features for professionals.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Advanced AI Engine</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Unlimited Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">24/7 Premium Support</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Limited Storage</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg shadow-purple-200
          hover:from-purple-700 hover:to-indigo-700 hover:scale-105 hover:shadow-xl hover:shadow-purple-300
          dark:from-purple-500 dark:to-indigo-500 dark:shadow-purple-700 dark:hover:from-purple-600 dark:hover:to-indigo-600 dark:hover:shadow-purple-600">
          Choose Alpha
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-pink-400
      dark:from-gray-800 dark:to-gray-900 dark:border-pink-600
      after:content-[''] after:absolute after:inset-0 after:bg-pink-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-pink-500 to-red-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        Best Value
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product2/250/180" alt="Product B" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-red-600 dark:from-pink-400 dark:to-red-400 mb-2">Product Beta</h2>
        <p class="text-gray-600 dark:text-gray-400">Balanced features for everyday use.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Intelligent Automation</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">100 GB Storage</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Standard Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Standard Support</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-pink-600 to-red-600 text-white shadow-lg shadow-pink-200
          hover:from-pink-700 hover:to-red-700 hover:scale-105 hover:shadow-xl hover:shadow-pink-300
          dark:from-pink-500 dark:to-red-500 dark:shadow-pink-700 dark:hover:from-pink-600 dark:hover:to-red-600 dark:hover:shadow-pink-600">
          Select Beta
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-yellow-400
      dark:from-gray-800 dark:to-gray-900 dark:border-yellow-600
      after:content-[''] after:absolute after:inset-0 after:bg-yellow-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-yellow-500 to-orange-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        New Arrival
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product3/250/180" alt="Product C" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-600 to-orange-600 dark:from-yellow-400 dark:to-orange-400 mb-2">Product Gamma</h2>
        <p class="text-gray-600 dark:text-gray-400">Essential features for everyday users.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-yellow-500 dark:text-yellow-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Basic Analytics</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Limited Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Community Support</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>No AI Engine</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-yellow-600 to-orange-600 text-white shadow-lg shadow-yellow-200
          hover:from-yellow-700 hover:to-orange-700 hover:scale-105 hover:shadow-xl hover:shadow-yellow-300
          dark:from-yellow-500 dark:to-orange-500 dark:shadow-yellow-700 dark:hover:from-yellow-600 dark:hover:to-orange-600 dark:hover:shadow-yellow-600">
          Choose Gamma
        </button>
      </div>
    </div>

  </div>

  <!-- Key Feature Comparison Table (Optional for more complexity) -->
  <div class="mt-16 bg-white dark:bg-gray-850 p-8 rounded-3xl shadow-2xl overflow-x-auto relative z-10 animate-fade-in-up
    border border-gray-100 dark:border-gray-700
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-50 before:via-pink-50 before:to-yellow-50 before:blur-3xl before:-z-10 before:opacity-50 dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-gray-900">
    <h3 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-600 dark:from-purple-400 dark:via-pink-300 dark:to-yellow-400 mb-8 text-center">Detailed Feature Comparison</h3>
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-gray-50 dark:bg-gray-750">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tl-xl">Feature</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Alpha</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Beta</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tr-xl">Product Gamma</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">AI Capabilities</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-rose-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Storage Capacity</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Variable</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">100 GB</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">50 GB</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Integrations</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Unlimited</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Standard</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Basic</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Support</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">24/7 Premium</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Email/Chat</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Community</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Uptime Guarantee</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99.9%</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99.5%</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99%</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

<style>
  /* This is for the '3D' effect on images and cards */
  .perspective-1000 {
    perspective: 1000px;
  }

  .rotate-x-6 {
    transform: rotateX(6deg);
  }

  /* Keyframe for fade-in-down animation */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
  }

  /* Keyframe for fade-in-up animation */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  /* Custom shadow for pseudo 3D effect on hover */
  .shadow-3xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), /* Default Tailwind 2xl */
                0 0 60px -15px rgba(0, 0, 0, 0.5);
  }

  .dark .shadow-3xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), /* Darker for dark mode */
                0 0 60px -15px rgba(0, 0, 0, 0.9);
  }

  /* Tailwind does not have a native way to apply custom properties in CSS, 
     so a custom class for backdrop color is used for the overall theme. */
  body {
    @apply bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 dark:from-gray-900 dark:to-black dark:via-gray-800;
  }
</style>

Composant Visionneuse de fichiers

Un composant de visionneuse de fichiers skeuomorphe avec une palette de couleurs pastel, conçu pour le commerce électronique, avec une mise en page réactive et une prise en charge du mode sombre. Il imite un dossier physique avec des onglets et une zone de contenu.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950 dark:to-purple-950 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-6 sm:p-8 lg:p-10 flex flex-col transform perspective-1000 -rotate-x-3 duration-500 hover:rotate-x-0 hover:translate-y-2 relative overflow-hidden">
    <!-- Top 'Folder Tab' Element -->
    <div class="absolute -top-4 left-1/2 -translate-x-1/2 w-48 h-12 bg-gradient-to-br from-blue-200 to-indigo-200 dark:from-blue-700 dark:to-indigo-700 rounded-t-lg shadow-inner border border-blue-300 dark:border-blue-600 flex items-center justify-center transform skew-x-12 -rotate-2 origin-bottom-left group-hover:skew-x-0 group-hover:rotate-0 transition-all duration-300">
      <span class="text-white font-semibold text-sm drop-shadow-md">Product Details</span>
    </div>

    <!-- Main Content Area - Mimics a paper sheet -->
    <div class="relative bg-white dark:bg-gray-850 rounded-lg p-6 sm:p-8 pt-12 sm:pt-16 pb-6 shadow-inner-lg shadow-gray-200 dark:shadow-gray-900 border border-t-4 border-gray-100 dark:border-gray-700 dark:border-t-4 dark:border-gray-600 flex flex-col md:flex-row gap-6 sm:gap-8 lg:gap-10 overflow-hidden transform skew-y-1 -rotate-1 origin-top-left group-hover:skew-y-0 group-hover:rotate-0 transition-all duration-300">

      <!-- Left: Product Image Placeholder -->
      <div class="md:w-1/2 relative group">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto rounded-md shadow-md border-4 border-gray-100 dark:border-gray-700 transform hover:scale-105 transition-transform duration-300 ease-in-out glow-on-hover">
        <div class="absolute bottom-2 right-2 p-2 bg-gradient-to-br from-pink-200 to-orange-200 dark:from-pink-700 dark:to-orange-700 rounded-full shadow-lg border border-pink-300 dark:border-pink-600 transform scale-0 group-hover:scale-100 transition-transform duration-300 translate-y-2">
          <svg class="w-6 h-6 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="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
        </div>
      </div>

      <!-- Right: Product Details -->
      <div class="md:w-1/2 flex flex-col justify-between">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold mb-3 text-blue-800 dark:text-blue-200 drop-shadow-sm">Vintage Leather Satchel</h2>
          <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm sm:text-base leading-relaxed tracking-wide">
            Crafted with genuine full-grain leather, this satchel combines timeless elegance with modern utility. 
            Perfect for the discerning professional seeking both style and durability. Features multiple compartments 
            and adjustable straps.
          </p>
          <div class="flex items-center mb-4">
            <span class="text-xl sm:text-2xl font-bold text-green-700 dark:text-green-300 mr-2">$129.99</span>
            <span class="text-gray-500 dark:text-gray-400 line-through text-sm">$149.99</span>
          </div>

          <!-- Rating Area -->
          <div class="flex items-center mb-4">
            <div class="flex space-x-1 text-orange-400 dark:text-orange-300">
              <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.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.929 8.76c-.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.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.929 8.76c-.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.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.929 8.76c-.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.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.929 8.76c-.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.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.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <span class="text-sm text-gray-600 dark:text-gray-400 ml-2">(4.5 / 5.0)</span>
          </div>
        </div>

        <!-- Add to Cart Button -->
        <button class="w-full py-3 px-6 bg-gradient-to-br from-green-300 to-teal-300 dark:from-green-600 dark:to-teal-600 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out border-b-4 border-green-500 dark:border-green-800 active:translate-y-0 active:shadow-md active:border-b-0 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75 relative group">
          Add to Cart
          <svg class="w-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 group-hover:block" 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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
           <span class="absolute top-0 left-0 w-full h-full bg-white dark:bg-gray-800 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-20 rounded-lg"></span>
        </button>
      </div>

      <!-- Corner 'Paper Clip' Element -->
      <div class="absolute top-1 right-2 w-8 h-8 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700 rounded-full shadow-inner border border-gray-400 dark:border-gray-500 transform rotate-45 -translate-y-2 translate-x-2 animate-bounce-custom"></div>

      <!-- Bottom Edge Shadow -->
      <div class="absolute bottom-0 left-0 right-0 h-4 bg-gray-100 dark:bg-gray-700 opacity-75 rounded-b-lg blur-sm"></div>
    </div>
  </div>

  <style>
    .perspective-1000 {
      perspective: 1000px;
    }
    .shadow-inner-lg {
      box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 8px 0 rgba(0, 0, 0, 0.06);
    }
    .dark .shadow-inner-lg {
      box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }
    .glow-on-hover {
      transition: box-shadow 0.3s ease-in-out;
    }
    .glow-on-hover:hover {
      box-shadow: 0 0 15px rgba(255, 204, 204, 0.7), 0 0 25px rgba(255, 153, 153, 0.5);
    }
    .dark .glow-on-hover:hover {
      box-shadow: 0 0 15px rgba(200, 100, 100, 0.7), 0 0 25px rgba(150, 50, 50, 0.5);
    }
    @keyframes bounce-custom {
      0%, 100% { transform: rotate(45deg) translate(-2px, -2px); }
      50% { transform: rotate(45deg) translate(2px, 2px); }
    }
    .animate-bounce-custom {
      animation: bounce-custom 2s infinite ease-in-out;
    }
  </style>
</div>

Glassmorphism_Dashboard_Modal

Un composant modal glassmorphism complexe et réactif avec un style monochromatique, adapté à la visualisation des données du tableau de bord et aux panneaux de commande, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-20 backdrop-blur-sm dark:bg-gray-900 dark:bg-opacity-40">
  <div class="relative w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl border border-white border-opacity-20 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-30 transform transition-all sm:scale-100 opacity-100">
    <div class="p-6 sm:p-8 space-y-8">
      <!-- Modal Header -->
      <div class="flex items-center justify-between pb-4 border-b border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-white dark:text-gray-100 drop-shadow-lg">Dashboard Analytics Overview</h2>
        <button class="p-2 rounded-full text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-80 hover:bg-white hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 dark:focus:ring-gray-600 transition duration-300">
          <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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
      </div>

      <!-- Modal Body - Grid Layout -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Card 1: Sales Summary -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Total Sales</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">$12,500</p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">+8% from last month</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Updated 2 mins ago</span>
          </div>
        </div>

        <!-- Card 2: New Customers -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">New Customers</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">280</p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">+15% from last week</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Updated 1 hour ago</span>
          </div>
        </div>

        <!-- Card 3: Avg. Session Duration -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Avg. Session</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">03:45<span class="text-xl">min</span></p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">-2% from yesterday</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Refreshed now</span>
          </div>
        </div>

        <!-- Card 4: Recent Activities (List) -->
        <div class="md:col-span-2 bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-5 drop-shadow">Recent Activities</h3>
          <ul class="space-y-4">
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">Jane Doe</span> updated product pricing.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">15 minutes ago</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Sales</span>
            </li>
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">John Smith</span> added a new report.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">1 hour ago</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Data</span>
            </li>
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">Emily White</span> completed task 'CRM Integration'.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">Yesterday</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Project</span>
            </li>
          </ul>
        </div>

        <!-- Card 5: Performance Chart (Placeholder) -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 flex flex-col items-center justify-center dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Quarterly Performance</h3>
          <img src="https://picsum.photos/300/200?grayscale&blur=5" alt="Chart Placeholder" class="w-full h-auto rounded-md object-cover opacity-70" />
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70 mt-3">Visualization data here.</p>
        </div>

      </div>

      <!-- Modal Footer -->
      <div class="pt-6 border-t border-white border-opacity-20 flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 dark:border-gray-700 dark:border-opacity-30">
        <button class="flex-1 sm:flex-none px-6 py-3 rounded-full text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-80 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 shadow-md hover:bg-white hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 dark:focus:ring-gray-600 transition duration-300">
          Refresh Data
        </button>
        <button class="flex-1 sm:flex-none px-6 py-3 rounded-full bg-white bg-opacity-25 text-white font-semibold shadow-lg hover:bg-opacity-35 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:bg-gray-700 dark:bg-opacity-30 dark:hover:bg-opacity-40 dark:focus:ring-gray-600 transition duration-300">
          Close Panel
        </button>
      </div>
    </div>
  </div>
</div>

Composant Messages d’alerte

Un composant de messages d’alerte minimaliste et dynamique pour les sites Web d’entreprise, avec un design réactif et une prise en charge du mode sombre. Il comprend différents types d’alertes telles que succès, erreur, informations et avertissement.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="mx-auto max-w-4xl space-y-6">

    <!-- Success Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-green-100 text-green-800 border border-green-200 dark:bg-green-700 dark:text-green-50 dark:border-green-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-green-600 dark:text-green-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Success! Your operation was completed.</h3>
        <p class="mt-1 text-sm">The data has been successfully saved to the cloud. You can now view the changes in your dashboard.</p>
      </div>
      <button class="p-1 rounded-full text-green-600 hover:bg-green-200 dark:text-green-50 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Error Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-red-100 text-red-800 border border-red-200 dark:bg-red-700 dark:text-red-50 dark:border-red-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-red-600 dark:text-red-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Error! Something went wrong.</h3>
        <p class="mt-1 text-sm">Failed to process your request. Please try again later or contact support if the problem persists.</p>
      </div>
      <button class="p-1 rounded-full text-red-600 hover:bg-red-200 dark:text-red-50 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Info Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-700 dark:text-blue-50 dark:border-blue-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-blue-600 dark:text-blue-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Information! Please note this important update.</h3>
        <p class="mt-1 text-sm">We have updated our privacy policy. Please review the new terms to continue using our services.</p>
      </div>
      <button class="p-1 rounded-full text-blue-600 hover:bg-blue-200 dark:text-blue-50 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Warning Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-yellow-100 text-yellow-800 border border-yellow-200 dark:bg-yellow-700 dark:text-yellow-50 dark:border-yellow-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-yellow-600 dark:text-yellow-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" 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 class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Warning! Your session will expire soon.</h3>
        <p class="mt-1 text-sm">You have 5 minutes left before your current session times out. Please save your work to avoid data loss.</p>
      </div>
      <button class="p-1 rounded-full text-yellow-600 hover:bg-yellow-200 dark:text-yellow-50 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

Brutalism_Earth_Tone_Back_To_Top_Button

Un bouton « Back to Top » d’inspiration brutaliste avec des tons de terre, conçu pour les blogs/sites de contenu. Il est modérément complexe, réactif et prend en charge le mode sombre. Le bouton présente un design très contrasté et une esthétique légèrement grossière.

Ouvrir Aperçu

                <div class="fixed bottom-4 right-4 z-50 group" x-data="{ showButton: false }" @scroll.window="showButton = (window.pageYOffset > 300) ? true : false" x-show="showButton" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90 -translate-y-4" x-transition:enter-end="opacity-100 scale-100 translate-y-0" x-cloak>
  <button
    @click="window.scrollTo({top: 0, behavior: 'smooth'})"
    class="p-4 bg-lime-700 dark:bg-lime-900 border-2 border-stone-900 dark:border-stone-100
           text-stone-100 dark:text-stone-100 text-xl font-bold uppercase
           shadow-[4px_4px_0_0_rgba(28,25,23,1)] dark:shadow-[4px_4px_0_0_rgba(250,250,250,1)]
           hover:bg-lime-800 dark:hover:bg-lime-950
           active:shadow-[0px_0px_0_0_rgba(28,25,23,1)] active:translate-x-[4px] active:translate-y-[4px]
           focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-300/50
           transition-all duration-150 ease-in-out
           flex items-center justify-center space-x-2 w-16 h-16 sm:w-20 sm:h-20"
    aria-label="Back to top"
  >
    <svg class="w-8 h-8 sm:w-10 sm:h-10 transform -rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="square" stroke-linejoin="square" stroke-width="3" d="M9 5l7 7-7 7"></path>
    </svg>
  </button>
  <div class="absolute -top-1 -left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
  <div class="absolute top-1 left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
</div>

Skeuomorphic_Social_Media_Form_Complex

Un composant de formulaire de réseau social complexe et skeuomorphe avec des couleurs complémentaires, un design réactif et une prise en charge du mode sombre. Imite les sensations et les textures des boutons du monde réel.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-t border-gray-50 border-solid dark:border-gray-700/50 p-6 sm:p-8 lg:p-10 flex flex-col gap-8 transition-all duration-300 ease-in-out">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-200 text-center drop-shadow-md tracking-tight">
      Connect and Share
    </h2>

    <!-- Post Creation Section -->
    <section class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative">
      <div class="absolute inset-0 rounded-2xl pointer-events-none"
           style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                      radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

      <div class="flex items-start gap-4 mb-4">
        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transform translate-z-0">
        <textarea placeholder="What's on your mind, Sarah?" class="flex-1 text-lg p-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition duration-200 appearance-none" rows="4" style="resize: none;"></textarea>
      </div>

      <div class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6">
        <div class="flex flex-wrap gap-3">
          <button class="flex items-center gap-2 p-3 rounded-full bg-blue-300 hover:bg-blue-400 active:bg-blue-500 text-blue-900 dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-gray-100 font-semibold shadow-md shadow-blue-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-blue-400 dark:border-blue-700 relative overflow-hidden group">
            <div class="inset-0 absolute rounded-full bg-gradient-to-t from-blue-400 to-blue-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-blue-700 dark:to-blue-500"></div>
            <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="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5c0-.55-.45-1-1-1H5a1 1 0 00-1 1v7.586l3.293-3.293a1 1 0 011.414 0L9 11l3.293-3.293a1 1 0 011.414 0L15 10.586V5h-.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L14 13.586V5H6v8.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L4 12.586V5h-.586L2 7V5c0-.55.45-1 1-1h13zm-1 9.586L13.586 12 12 13.586l-2-2-1.414 1.414L8 15.586V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.586zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.414zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h9.586L13 13.586z" clip-rule="evenodd" /></svg>
            <span class="relative z-10">Photo/Video</span>
          </button>
          <button class="flex items-center gap-2 p-3 rounded-full bg-pink-300 hover:bg-pink-400 active:bg-pink-500 text-pink-900 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:bg-pink-800 dark:text-gray-100 font-semibold shadow-md shadow-pink-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-pink-400 dark:border-pink-700 relative overflow-hidden group">
            <div class="inset-0 absolute rounded-full bg-gradient-to-t from-pink-400 to-pink-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-pink-700 dark:to-pink-500"></div>
            <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 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" /></svg>
            <span class="relative z-10">Feeling/Activity</span>
          </button>
        </div>
        <button type="submit" class="px-8 py-3 rounded-full text-xl font-bold bg-green-500 hover:bg-green-600 active:bg-green-700 text-white dark:bg-green-700 dark:hover:bg-green-800 dark:active:bg-green-900 shadow-xl shadow-green-600/40 dark:shadow-none active:shadow-inner active:shadow-green-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-green-700 dark:border-green-900 relative overflow-hidden group">
          <div class="inset-0 absolute rounded-full bg-gradient-to-t from-green-600 to-green-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-green-800 dark:to-green-600"></div>
          <span class="relative z-10">Post</span>
        </button>
      </div>
    </section>

    <!-- Advanced Settings / Privacy Section -->
    <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
          <div class="absolute inset-0 rounded-2xl pointer-events-none"
               style="background: radial-gradient(circle at top right, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                          radial-gradient(circle at bottom left, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

        <h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Audience Settings</h3>
        <div class="mb-4">
          <label for="audience" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can see your post?</label>
          <div class="relative">
            <select id="audience" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
              <option value="public">Public</option>
              <option value="friends">Friends</option>
              <option value="private">Only Me</option>
              <option value="custom">Custom</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <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.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
            </div>
          </div>
        </div>

        <div>
          <label for="comments" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can comment?</label>
          <div class="relative">
            <select id="comments" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
              <option value="anyone">Anyone</option>
              <option value="friends">Friends</option>
              <option value="mentions">Only Mentions</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <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.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
          <div class="absolute inset-0 rounded-2xl pointer-events-none"
               style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                          radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

        <h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Advanced Options</h3>
        <div class="flex items-center justify-between mb-4">
          <span class="text-gray-700 dark:text-gray-300">Enable notifications</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
        <div class="flex items-center justify-between mb-4">
          <span class="text-gray-700 dark:text-gray-300">Save as draft</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-gray-700 dark:text-gray-300">Enable location tagging</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
      </div>
    </section>

    <!-- Call to action/secondary actions -->
    <div class="flex flex-col sm:flex-row gap-4 justify-end mt-4">
      <button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-gray-300 hover:bg-gray-400 active:bg-gray-500 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500 dark:text-gray-200 shadow-md shadow-gray-400/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-gray-400 dark:border-gray-600 relative overflow-hidden group">
        <div class="inset-0 absolute rounded-full bg-gradient-to-t from-gray-400 to-gray-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-gray-700 dark:to-gray-500"></div>
        <span class="relative z-10">Cancel</span>
      </button>
      <button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 text-white dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:active:bg-indigo-900 shadow-xl shadow-indigo-600/40 dark:shadow-none active:shadow-inner active:shadow-indigo-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-indigo-700 dark:border-indigo-900 relative overflow-hidden group">
        <div class="inset-0 absolute rounded-full bg-gradient-to-t from-indigo-600 to-indigo-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-indigo-800 dark:to-indigo-600"></div>
        <span class="relative z-10">Save Draft</span>
      </button>
    </div>
  </div>
</div>

Table des matières Composant - Tons de terre 3D

Un composant complexe de table des matières inspiré de la 3D pour les sites Web d’entreprise et d’entreprise, avec des tons de terre et une réactivité totale avec prise en charge du mode sombre. Conçu pour offrir de la profondeur et de l’engagement.

Ouvrir Aperçu

                <div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 md:p-8 lg:p-12 min-h-screen">

  <div class="max-w-7xl mx-auto py-8 lg:py-16">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 lg:mb-16 tracking-tight text-stone-800 dark:text-stone-200 relative">
      <span class="block">Table of Contents</span>
      <span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-1 bg-amber-500 rounded-full mt-2"></span>
    </h2>

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

      <!-- TOC Item 1 -->
      <a href="#introduction" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-500 to-amber-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-amber-400 dark:bg-amber-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253s3.332.477 4.5 1.253m-9 0V14m0-7a3 3 0 013 3v2m0 0l-1.477 1.477L9 16m4-4s-1.143-2-3-2m9 0a3 3 0 013 3v2m0 0l-1.477 1.477L21 16m-4-4c-1.143 2-3 2-3 2s-1.143 0-3-2"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">1. Introduction</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Overview of our mission and values.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-amber-500 dark:bg-amber-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-amber-600 dark:group-hover:bg-amber-800 transition-colors duration-200">Read More</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 2 -->
      <a href="#company-history" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-green-500 dark:bg-green-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">2. Company History</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Key milestones and growth journey.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-green-600 dark:bg-green-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-green-700 dark:group-hover:bg-green-900 transition-colors duration-200">Explore Past</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 3 -->
      <a href="#our-services" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-blue-500 dark:bg-blue-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M21 13.255v-2.189a1.125 1.125 0 011.125-1.125h.875a.875.875 0 00.875-.875V7a.875.875 0 00-.875-.875H22a1.125 1.125 0 01-1.125-1.125V4.255a1.125 1.125 0 00-1.125-1.125H16.89M12 17.5a4.5 4.5 0 110-9 4.5 4.5 0 010 9zM12 17.5V21M12 6.5V3"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">3. Our Services</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Comprehensive solutions for your business.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-blue-600 dark:bg-blue-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-blue-700 dark:group-hover:bg-blue-900 transition-colors duration-200">View Offerings</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 4 -->
      <a href="#client-testimonials" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-red-500 to-red-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-red-400 dark:bg-red-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M7 8h10M7 12h10M7 16h10M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">4. Client Testimonials</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Hear from our satisfied clients.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-red-500 dark:bg-red-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-red-600 dark:group-hover:bg-red-800 transition-colors duration-200">Read Reviews</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 5 -->
      <a href="#our-team" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-purple-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-purple-400 dark:bg-purple-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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 20h-8a4 4 0 01-4-4v-1.586a1 1 0 01-.293-.707L4 12V6a2 2 0 012-2h12a2 2 0 012 2v6a2 2 0 01-2 2h-1m-7 8a4 4 0 100-8 4 4 0 000 8z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">5. Our Team</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Meet the experts behind our success.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-purple-500 dark:bg-purple-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-purple-600 dark:group-hover:bg-purple-800 transition-colors duration-200">Meet Us</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 6 -->
      <a href="#contact-us" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-teal-500 to-teal-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-teal-400 dark:bg-teal-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">6. Contact Us</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Get in touch for inquiries.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-teal-600 dark:group-hover:bg-teal-800 transition-colors duration-200">Contact Now</span>
          </div>
        </div>
      </a>

    </div>
  </div>

  <style>
  /* Adding custom CSS for 3D transforms */
  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  .rotateY-5 {
    transform: rotateY(5deg);
  }

  .rotateX-5 {
    transform: rotateX(5deg);
  }
  .group-hover\:rotateY-5:hover {
    transform: rotateY(5deg) scale(1.05);
  }
  .group-hover\:rotateX-5:hover {
    transform: rotateX(5deg) scale(1.05);
  }
  .group-hover\:scale-105:hover {
    transform: scale(1.05);
  }

  /* Combining for better 3D effect on hover */
  .group-hover\:rotateY-5.group-hover\:rotateX-5.group-hover\:scale-105:hover {
    transform: rotateY(5deg) rotateX(5deg) scale(1.05);
  }
  
  /* Z-axis transforms */
  .translateZ-5 {
    transform: translateZ(5px);
  }
  .translateZ-10 {
    transform: translateZ(10px);
  }
  .translateZ-15 {
    transform: translateZ(15px);
  }
  .translateZ-20 {
    transform: translateZ(20px);
  }

  /* Inner shadow for '3D' depth */
  .shadow-inner-xl {
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.1);
  }
  .dark\:shadow-inner-xl-dark {
    box-shadow: inset 0 6px 12px rgba(255,255,255,0.05);
  }
  .shadow-xl-dark {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }
  
  /* Backface visibility to prevent flickering on 3D transforms */
  .backface-hidden {
    backface-visibility: hidden;
  }
  </style>

</div>

Composant de fenêtre de chat

Composant de fenêtre de chat réactif conçu pour une utilisation professionnelle, doté d’une interface utilisateur en mode sombre avec une palette de couleurs complémentaire. Comprend des messages de remplacement, une liste de contacts et une zone de saisie.

Ouvrir Aperçu

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans">

  <!-- Chat Window Wrapper -->
  <div class="flex-1 flex overflow-hidden rounded-lg shadow-xl m-4 lg:m-8 bg-white dark:bg-gray-800">

    <!-- Left Panel: Contacts List (Hidden on Mobile, shown on larger screens) -->
    <div class="hidden md:flex flex-col w-1/4 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850">
      <div class="p-4 border-b border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Chats</h2>
        <input type="text" placeholder="Search chats..." class="w-full mt-3 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-400">
      </div>
      <div class="flex-1 overflow-y-auto">
        <!-- Contact 1 (Active) -->
        <a href="#" class="flex items-center p-4 hover:bg-purple-100 dark:hover:bg-purple-900 transition-colors duration-200 bg-purple-50 dark:bg-purple-800 border-l-4 border-purple-600 dark:border-purple-400">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="font-semibold text-purple-800 dark:text-purple-200">John Doe</p>
            <p class="text-sm text-purple-600 dark:text-purple-400 truncate">Hey, are you free for a call?</p>
          </div>
          <span class="text-xs text-purple-500 dark:text-purple-300">10:30 AM</span>
        </a>
        <!-- Contact 2 -->
        <a href="#" class="flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">That's great news!</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-300">Yesterday</span>
        </a>
        <!-- Contact 3 -->
        <a href="#" class="flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/51.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Michael Johnson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Let me know if you need anything.</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-300">2 days ago</span>
        </a>
      </div>
    </div>

    <!-- Right Panel: Chat Messages -->
    <div class="flex flex-col flex-1">
      <!-- Chat Header -->
      <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
            <p class="text-sm text-green-500 dark:text-green-400">Online</p>
          </div>
        </div>
        <div class="flex space-x-4">
          <button aria-label="Call" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
          </button>
          <button aria-label="Video Call" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Chat Messages Area -->
      <div class="flex-1 overflow-y-auto p-4 space-y-4">
        <!-- Incoming Message -->
        <div class="flex items-start">
          <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-xl max-w-sm">
            <p class="text-sm text-gray-800 dark:text-gray-100">Hey, good morning! Hope you're having a productive day.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">10:28 AM</p>
          </div>
        </div>

        <!-- Outgoing Message -->
        <div class="flex justify-end">
          <div class="bg-purple-600 dark:bg-purple-700 text-white p-3 rounded-xl max-w-sm">
            <p class="text-sm">Good morning! I am. Just finishing up the Q3 report. Have you reviewed the client proposal?</p>
            <p class="text-xs text-purple-200 dark:text-purple-300 text-right mt-1">10:29 AM</p>
          </div>
        </div>

        <!-- Incoming Message -->
        <div class="flex items-start">
          <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-xl max-w-sm">
            <p class="text-sm text-gray-800 dark:text-gray-100">Yes, I have. Looks solid. Just a minor tweak on the budget section, I'll send you the revised version in a bit.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">10:30 AM</p>
          </div>
        </div>

        <!-- Outgoing Message (Last message) -->
        <div class="flex justify-end">
          <div class="bg-purple-600 dark:bg-purple-700 text-white p-3 rounded-xl max-w-sm">
            <p class="text-sm">Perfect, looking forward to it. Are you free for a quick call to discuss the next steps on project 'Alpha'?</p>
            <p class="text-xs text-purple-200 dark:text-purple-300 text-right mt-1">10:30 AM</p>
          </div>
        </div>

      </div>

      <!-- Chat Input Area -->
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850 flex items-center space-x-3">
        <button aria-label="Attach file" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.414a4 4 0 00-5.656-5.656l-6.415 6.415a3 3 0 104.243 4.243l.707-.707m1.414-.707l.707-.707m1.414-.707l.707-.707m0 0l1 1m0-1v1" />
          </svg>
        </button>
        <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-400">
        <button aria-label="Send message" class="bg-purple-600 dark:bg-purple-500 text-white p-3 rounded-full hover:bg-purple-700 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-90 -mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
          </svg>
        </button>
      </div>
    </div>

  </div>

</div>

Infobulle monochromatique brutaliste

Un composant d’info-bulle monochromatique complexe, de style brutaliste, conçu pour les sites de blog/de contenu, avec plusieurs éléments interactifs et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 transition-colors duration-300">
  <div class="relative group max-w-sm mx-auto">
    <a href="#" class="inline-block px-6 py-3 text-lg font-extrabold tracking-tight uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-6 hover:translate-x-1 hover:-translate-y-1 hover:shadow-brutal dark:hover:shadow-brutal-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
      Hover Me
    </a>

    <div class="absolute hidden group-hover:block transition-all duration-300 ease-out transform scale-0 origin-bottom-left group-hover:scale-100 mt-4 md:mt-6 left-1/2 -ml-24 w-60 sm:w-72 md:w-80 lg:w-96 p-4 md:p-6 bg-gray-200 dark:bg-gray-800 border-4 border-gray-800 dark:border-gray-200 shadow-brutal dark:shadow-brutal-dark z-50 overflow-hidden">
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-200 transform rotate-[135deg]"></div>
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-200 dark:border-b-gray-800 transform rotate-[135deg] -translate-x-0.5 -translate-y-0.5"></div>

      <h3 class="text-xl md:text-2xl font-extrabold uppercase mb-2 text-gray-900 dark:text-gray-100 border-b-2 border-dashed border-gray-500 dark:border-gray-500 pb-1">
        Brutal Tip Title
      </h3>
      <p class="text-sm md:text-base text-gray-700 dark:text-gray-300 mb-4 tracking-tight leading-snug">
        This is a raw and unpolished tooltip designed with a brutalist aesthetic. It's meant to convey information bluntly and directly. 
        Consider this a visual declaration, not a gentle suggestion.
      </p>
      
      <div class="mb-4 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 border-t-2 border-dashed border-gray-500 dark:border-gray-500 pt-3">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author" class="w-10 h-10 rounded-full border-2 border-gray-800 dark:border-gray-200 object-cover flex-shrink-0">
        <div>
          <p class="text-xs md:text-sm font-bold uppercase text-gray-800 dark:text-gray-200">By John 'The Hammer' Doe</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">March 15, 2023</p>
        </div>
      </div>

      <div class="flex flex-wrap gap-2 mb-4">
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Brutalism</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Monochromatic</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Content</span>
      </div>

      <a href="#" class="inline-block w-full text-center px-4 py-2 text-sm md:text-base font-extrabold uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-3 hover:translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-sm dark:hover:shadow-brutal-sm-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
        Read More
      </a>

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

<style>
  /* Custom shadows for brutalism style */
  .shadow-brutal {
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-dark {
    box-shadow: 10px 10px 0px 0px rgba(255, 255, 255, 1);
  }
  .shadow-brutal-sm {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-sm-dark {
    box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
  }

  /* Triangle for tooltip */
  .group-hover\:block {
    left: 50%;
    transform: translateX(-50%) translateY(10px) rotate(0deg) scale(0);
    transform-origin: bottom center;
  }
  .group:hover .group-hover\:block {
    transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
  }
  @media (min-width: 768px) {
    .group-hover\:block {
      left: 50%;
      transform: translateX(-50%) translateY(20px) rotate(0deg) scale(0);
      transform-origin: bottom center;
    }
    .group:hover .group-hover\:block {
      transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
    }
  }
</style>

Composant de chargeur skeuomorphe

Un composant de chargement professionnel et réactif avec un design skeuomorphe, une palette de couleurs complémentaire et une prise en charge du mode sombre, adapté aux sites Web d’entreprise. Comprend une barre de chargement subtile et animée à l’intérieur d’un conteneur métallique.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-500">

  <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-8 tracking-tight text-center">
    Loading...
  </h2>

  <!-- Skeuomorphic Loader Container -->
  <div class="relative w-full max-w-sm h-20 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(0,0,0,0.3),5px_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_2px_2px_5px_rgba(255,255,255,0.1),inset_-2px_-2px_8px_rgba(0,0,0,0.9),5px_5px_15px_rgba(0,0,0,0.5)] p-4 border border-solid border-gray-400 dark:border-gray-600 transition-all duration-500 animate-pulse-subtle flex flex-col justify-center items-center">
    
    <!-- Inner Bezel/Recess -->
    <div class="relative w-full h-12 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-[inset_1px_1px_3px_rgba(0,0,0,0.2),inset_-1px_-1px_3px_rgba(255,255,255,0.7)] dark:shadow-[inset_1px_1px_3px_rgba(255,255,255,0.05),inset_-1px_-1px_3px_rgba(0,0,0,0.9)] p-2 transition-all duration-500">
      
      <!-- Loading Bar Track -->
      <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner-dark transition-colors duration-500">
        
        <!-- Loading Progress Bar (complementary color - often orange/yellow or green) -->
        <div class="h-full bg-gradient-to-r from-orange-400 to-amber-500 dark:from-orange-500 dark:to-amber-600 rounded-lg animate-loading-bar origin-left shadow-[0_0_8px_rgba(251,146,60,0.8)] dark:shadow-[0_0_10px_rgba(249,115,22,0.6)]" style="width: 75%;">
        </div>
      </div>
    </div>
    
    <p class="absolute -bottom-6 text-sm text-gray-600 dark:text-gray-400 font-medium whitespace-nowrap overflow-hidden">
      Preparing resources...
    </p>

  </div>

  <style>
    @keyframes loading-bar {
      0% { width: 0%; transform: translateX(-100%); opacity: 0.5; }
      25% { width: 50%; transform: translateX(0%); opacity: 0.8; }
      50% { width: 100%; opacity: 1; }
      75% { width: 50%; transform: translateX(50%); opacity: 0.8; }
      100% { width: 0%; transform: translateX(100%); opacity: 0.5; }
    }

    .animate-loading-bar {
      animation: loading-bar 2s ease-in-out infinite alternate;
    }

    @keyframes pulse-subtle {
      0%, 100% { transform: scale(1); filter: brightness(1); }
      50% { transform: scale(1.01); filter: brightness(1.05); }
    }

    .animate-pulse-subtle {
      animation: pulse-subtle 3s ease-in-out infinite;
    }

    /* Custom utility for inner dark shadow to mimic depth */
    .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    }
    .dark .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    }
  </style>

</div>

1 ... 59 60 61 62 63 ... 282

Catégories

Tous les composants