Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Tableau de bord Neon Modal

Un modal de tableau de bord complexe et réactif avec des effets de néon/lueur, utilisant des couleurs d’automne, la prise en charge du mode sombre et des éléments interactifs. Conçu pour la visualisation de données et les panneaux de contrôle.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 backdrop-blur-sm dark:bg-black dark:bg-opacity-85">
    <div class="relative w-full max-w-4xl p-8 overflow-hidden rounded-lg shadow-xl bg-gradient-to-br from-orange-800 to-red-900 ring-4 ring-orange-400/50 dark:from-orange-900 dark:to-red-950 dark:ring-red-700/60 transition-all duration-300 transform scale-95 opacity-0 animate-scale-in glow-effect-container">
        <style>
            @keyframes scale-in {
                from { transform: scale(0.95); opacity: 0; }
                to { transform: scale(1); opacity: 1; }
            }
            .animate-scale-in {
                animation: scale-in 0.3s ease-out forwards;
            }
            .glow-effect-container::before {
                content: '';
                position: absolute;
                top: -10px;
                left: -10px;
                right: -10px;
                bottom: -10px;
                border-radius: 12px; /* Slightly larger than element's border-radius */
                background: conic-gradient(from var(--angle), #fb923c, #f97316, #ea580c, #c2410c, #b45309, #fb923c);
                background-size: 200% 200%;
                filter: blur(15px);
                z-index: -1;
                animation: rotate 4s linear infinite;
                opacity: 0.7;
            }
            .dark .glow-effect-container::before {
                background: conic-gradient(from var(--angle), #ef4444, #dc2626, #b91c1c, #991b1b, #7f1d1d, #ef4444);
            }
            @keyframes rotate {
                to { --angle: 360deg; }
            }
            @property --angle {
                syntax: '<angle>';
                inherits: false;
                initial-value: 0deg;
            }
        </style>
        <button class="absolute top-4 right-4 text-orange-200 hover:text-orange-100 dark:text-red-300 dark:hover:text-red-200 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-red-400 rounded-full p-2">
            <svg class="w-8 h-8" 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>

        <h2 class="mb-6 text-4xl font-extrabold text-orange-100 drop-shadow-lg text-center dark:text-red-100 sm:text-5xl">
            Dashboard Insights <span class="text-orange-300 dark:text-red-200">Overview</span>
        </h2>

        <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            <!-- Card 1: Sales Performance -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Sales Performance</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-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="M13 7h8m0 0v8m0-8L13 17.5M4 16l3-3m0 0l3-3m-3 3l-3 3M17 14l-3-3m0 0l-3-3m3 3l-3 3"></path></svg>
                </div>
                <p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">$15.2K</p>
                <p class="text-orange-300 dark:text-red-400">+12% from last month</p>
                <div class="w-full h-2 mt-4 rounded-full bg-orange-600 dark:bg-red-800 overflow-hidden">
                    <div class="h-full rounded-full bg-orange-300 dark:bg-red-500 w-3/4"></div>
                </div>
            </div>

            <!-- Card 2: User Engagement -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">User Engagement</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-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="M17 20h5v-5a3 3 0 00-3-3H6a3 3 0 00-3 3v5h5M7 13v-3a2 2 0 012-2h4a2 2 0 012 2v3m7 0l2 2m-2-2l-2-2m2 2L13 9.5"></path></svg>
                </div>
                <p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">2.8K</p>
                <p class="text-orange-300 dark:text-red-400">+5% new sign-ups</p>
                <div class="flex items-center mt-4">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User 2">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User 3">
                    <span class="ml-2 text-orange-200 dark:text-red-300">+15 more</span>
                </div>
            </div>

            <!-- Card 3: Traffic Sources -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Traffic Sources</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-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 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"></path></svg>
                </div>
                <ul class="text-orange-200 dark:text-red-300 space-y-2 text-lg">
                    <li class="flex justify-between">Direct <span class="font-semibold">40%</span></li>
                    <li class="flex justify-between">Search <span class="font-semibold">30%</span></li>
                    <li class="flex justify-between">Referral <span class="font-semibold">20%</span></li>
                    <li class="flex justify-between">Social <span class="font-semibold">10%</span></li>
                </ul>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row justify-end mt-8 gap-4">
            <button class="px-8 py-3 rounded-full font-bold text-lg text-orange-100 bg-orange-600 hover:bg-orange-700 ring-2 ring-orange-400 hover:ring-orange-300 dark:bg-red-800 dark:hover:bg-red-900 dark:ring-red-700 dark:hover:ring-red-600 transition-all duration-300 shadow-lg neon-button">
                View Full Report
            </button>
            <button class="px-8 py-3 rounded-full font-bold text-lg text-orange-900 bg-orange-300 hover:bg-orange-200 ring-2 ring-orange-200 hover:ring-orange-100 dark:text-red-900 dark:bg-red-400 dark:hover:bg-red-300 dark:ring-red-300 dark:hover:ring-red-200 transition-all duration-300 shadow-lg neon-button">
                Customize Dashboard
            </button>
            <style>
                .neon-button {
                    box-shadow: 0 0 5px rgba(251, 146, 60, 0.7), 0 0 15px rgba(251, 146, 60, 0.5), 0 0 30px rgba(251, 146, 60, 0.3);
                }
                .dark .neon-button {
                    box-shadow: 0 0 5px rgba(239, 68, 68, 0.7), 0 0 15px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.3);
                }
                .neon-button:hover {
                    transform: scale(1.03);
                    box-shadow: 0 0 8px rgba(251, 146, 60, 0.9), 0 0 20px rgba(251, 146, 60, 0.7), 0 0 40px rgba(251, 146, 60, 0.5);
                }
                .dark .neon-button:hover {
                    box-shadow: 0 0 8px rgba(239, 68, 68, 0.9), 0 0 20px rgba(239, 68, 68, 0.7), 0 0 40px rgba(239, 68, 68, 0.5);
                }
            </style>
        </div>
    </div>
</div>

Composant de pied de page - Swiss Pastel Consulting

Un composant de pied de page propre, minimaliste et réactif avec une influence du design suisse, avec des couleurs pastel et une typographie claire, adapté aux sites Web de conseil/services. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-violet-50 text-violet-800 dark:bg-gray-800 dark:text-gray-200 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 informational-footer">
    <!-- About Section -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">About Us</h3>
      <p class="text-sm leading-relaxed mb-4">Providing expert consulting services to help your business thrive. Our approach is rooted in precision, clarity, and measurable results.</p>
      <div class="flex space-x-4">
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048 1.05.056 1.62.231 2.062.409.54.225.9-.475 1.706-1.129 1.16-.677 2.1-1.42 2.574-2.834.786-.289.479-.933.864-1.178.683-.437 1.26-.931 1.785-1.465.526-.534.981-1.077 1.341-1.58.36-.502 1.4-1.745 1.4-1.745s-.192-.613-.192-1.242V8.91c0-2.427-4.997-2.738-4.997-2.738v0h12.518V9.1h6.623V4.492c0-.527-.427-.954-.954-.954H2c-.527 0-.954.427-.954.954V19.508c0,.527.427.954.954.954h20c.527 0 .954-.427.954-.954h.001ZM12 4.41c-4.148 0-7.51 3.362-7.51 7.51s3.362 7.51 7.51 7.51 7.51-3.362 7.51-7.51-3.362-7.51-7.51-7.51Zm0 12.235c-2.612 0-4.725-2.113-4.725-4.725S9.388 7.185 12 7.185s4.725 2.113 4.725 4.725-2.113 4.725-4.725 4.725Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.89c-.58 0-1.05-.47-1.05-1.05v-5.69c0-.58.47-1.05 1.05-1.05h1.2v1.5H8.29v4.19h8.22v-4.19h-1.2v-1.5h1.2c.58 0 1.05.47 1.05 1.05v5.69c0 .58-.47 1.05-1.05 1.05H8.29zM12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-4.75-9.21H8c.28-.48.65-.92 1.08-1.3l-1.33-1.33c-.45.45-.85.95-1.2 1.48zm-1.89-1.89h1.77L12 4.14 17.58 9.5h1.77L12 2zM12 10.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zm0 3.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
          </svg>
        </a>
      </div>
    </div>

    <!-- Services Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Our Services</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Strategy Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Operations Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Technology Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Financial Advisory</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Market Research</a></li>
      </ul>
    </div>

    <!-- Quick Links Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Quick Links</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Home</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">About Us</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Services</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Contact</a></li>
      </ul>
    </div>

    <!-- Contact Info Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Contact Us</h3>
      <div class="space-y-2 text-sm">
        <p>123 Consulting Rd<br>Suite 100, Business City<br>BC 12345, Country</p>
        <p><a href="tel:+1234567890" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">+1 (234) 567-890</a></p>
        <p><a href="mailto:[email protected]" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">[email protected]</a></p>
        <p>
          <img src="https://picsum.photos/id/1084/100/60" alt="Office map placeholder" class="w-full max-w-xs h-auto rounded-md shadow-sm mt-4 object-cover">
        </p>
      </div>
    </div>
  </div>

  <div class="border-t border-violet-200 dark:border-gray-700 mt-12 pt-8 text-center text-sm">
    <p>&copy; <time datetime="2023">2023</time> Consulting Firm. All rights reserved.</p>
  </div>
</footer>

3D_Real_Estate_Tooltip

Il s’agit d’un composant d’info-bulle modérément complexe et réactif avec des éléments de conception 3D et une palette de couleurs chaudes de coucher de soleil, adapté aux annonces immobilières. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="relative group w-full max-w-sm mx-auto perspective-1000">
    <!-- Tooltip Trigger (Simulated 3D Card) -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden
                transform-gpu transition-all duration-300 ease-in-out
                group-hover:rotate-x-3 group-hover:rotate-y-3 
                group-hover:scale-105 group-hover:-translate-y-2
                group-hover:shadow-3xl-lg 
                border border-solid border-orange-200 dark:border-gray-700
                active:scale-100 active:rotate-0 active:translate-y-0
                cursor-pointer
                p-4 sm:p-6">

      <div class="flex items-center space-x-4 mb-4">
        <img src="https://picsum.photos/60/60?random=1" alt="Property Thumbnail" class="w-16 h-16 rounded-lg object-cover shadow-md">
        <div>
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white capitalize">Luxury Villa</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">Miami Beach, FL</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-2">
        Stunning beachfront property with panoramic ocean views and private pool. 
        Ideal for luxurious living or investment.
      </p>

      <div class="flex justify-between items-center text-sm font-medium">
        <span class="text-orange-600 dark:text-orange-400">$2.5M</span>
        <button class="px-4 py-2 bg-orange-500 text-white rounded-lg shadow-md 
                       hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50
                       dark:bg-orange-700 dark:hover:bg-orange-600">View Details</button>
      </div>


      <!-- Floating Action Button (Simulated) -->
      <div class="absolute -bottom-4 -right-4 w-12 h-12 flex items-center justify-center 
                  bg-gradient-to-br from-orange-400 to-red-500 text-white 
                  rounded-full shadow-lg transform-gpu transition-all duration-300 ease-in-out
                  group-hover:scale-125 group-hover:rotate-12 group-hover:shadow-xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </div>

    </div>

    <!-- Tooltip Content -->
    <div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                absolute bottom-[calc(100%+15px)] left-1/2 -translate-x-1/2 
                transform-gpu transition-all duration-300 ease-in-out 
                group-hover:-translate-y-0 group-hover:scale-100 group-hover:translate-z-50
                select-none
                w-[calc(100%+40px)] sm:w-[calc(100%+60px)] p-4 sm:p-5
                bg-gradient-to-br from-orange-400 to-red-500 dark:from-orange-700 dark:to-red-800 
                rounded-xl shadow-2xl z-10 
                border-4 border-solid border-white/50 dark:border-gray-700/50 
                before:content-[''] before:absolute before:bottom-[-8px] before:left-1/2 
                before:-translate-x-1/2 before:w-0 before:h-0 
                before:border-l-[12px] before:border-l-transparent 
                before:border-r-[12px] before:border-r-transparent 
                before:border-t-[12px] before:border-t-orange-400 dark:before:border-t-orange-700">

      <h4 class="text-white text-lg font-bold mb-2 flex items-center justify-between">
        Property Highlights
        <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="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2-2m2 2l-2 2M15 9V4a2 2 0 00-2-2H6a2 2 0 00-2 2v7.586a1 1 0 01-.293.707l-2.414 2.414A1 1 0 003 16h.01L5 16h2a1 1 0 011 1v4a1 1 0 01-1 1H3a1 1 0 01-1-1v-4a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 000 13V6a2 2 0 012-2h10a2 2 0 012 2v1" />
        </svg>
      </h4>
      <ul class="text-white/90 text-sm space-y-1 mb-3">
        <li class="flex items-center">
          <svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" 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="M5 13l4 4L19 7"></path></svg>
          5 Beds, 6 Baths
        </li>
        <li class="flex items-center">
          <svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" 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="M5 13l4 4L19 7"></path></svg>
          5,200 sqft
        </li>
        <li class="flex items-center">
          <svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" 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="M5 13l4 4L19 7"></path></svg>
          Oceanfront Lot
        </li>
      </ul>

      <div class="flex items-center text-sm mb-2 opacity-90">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Agent Avatar" class="w-8 h-8 rounded-full border-2 border-white/70 shadow-md mr-2">
        <span class="font-medium text-white">Contact Agent:</span>
        <a href="#" class="ml-2 text-white underline hover:opacity-80 transition-opacity">John Doe</a>
      </div>

      <div class="text-right">
        <button class="px-3 py-1 bg-white bg-opacity-20 text-white rounded-md text-xs
                       hover:bg-opacity-30 transition-colors focus:outline-none focus:ring-1 focus:ring-white focus:ring-opacity-70">
          See More Images
        </button>
      </div>

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

<style>
  /* Adding custom perspective for the 3D effect without needing a parent container */
  .perspective-1000 {
    perspective: 1000px;
  }

  /* Custom shadow for a more pronounced 3D effect on hover */
  .shadow-3xl-lg {
    box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.4), 0 10px 10px -5px rgba(249, 115, 22, 0.2), 0 0 0 1px rgba(249, 115, 22, 0.1);
  }
  .dark .shadow-3xl-lg {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
  }

  /* Translate-z for 3D effect, works with perspective */
  .group-hover\:translate-z-50 {
    transform: translateZ(50px);
  }
  /* Ensures the pseudo-element pointer also has a border */
  .before\:border-t-orange-400 {
    border-top-color: var(--tw-gradient-from);
  }
  .dark .before\:border-t-orange-700 {
    border-top-color: var(--tw-gradient-from);
  }
</style>

Playful_Documentation_Columns_Component

Un composant de documentation/colonnes wiki ludique et coloré avec des tons ensoleillés/chauds, des éléments arrondis et la prise en charge du mode sombre. Conçu pour être réactif sur tous les appareils.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-orange-50 dark:bg-gray-900 transition-colors duration-300 py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 sm:mb-16 lg:mb-20">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-orange-700 dark:text-orange-300 mb-4 tracking-tight leading-tight">
        Explore Our Sunny Guides!
      </h2>
      <p class="text-lg sm:text-xl text-orange-600 dark:text-orange-400 max-w-2xl mx-auto">
        Dive into our vibrant collection of helpful articles and fun insights to brighten your day.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12">
      <!-- Column 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-orange-200 dark:border-yellow-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs1/300/200" alt="Getting Started" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-orange-300 dark:border-orange-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-orange-700 dark:text-orange-300 mb-3 text-center">
          Quick Start Guide
        </h3>
        <p class="text-orange-600 dark:text-orange-400 text-base sm:text-lg mb-6 text-center">
          Jump right in with our easy-to-follow guide for new adventurers.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Explore Now
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Column 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-yellow-200 dark:border-orange-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs2/300/200" alt="Advanced Features" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-yellow-300 dark:border-yellow-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-yellow-700 dark:text-yellow-300 mb-3 text-center">
          Advanced Tricks
        </h3>
        <p class="text-yellow-600 dark:text-yellow-400 text-base sm:text-lg mb-6 text-center">
          Uncover the hidden gems and master the advanced functionalities.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Column 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-red-200 dark:border-red-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs3/300/200" alt="Support & FAQs" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-red-300 dark:border-red-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-300 mb-3 text-center">
          Support & Smiles
        </h3>
        <p class="text-red-600 dark:text-red-400 text-base sm:text-lg mb-6 text-center">
          Find answers to common questions and get a helping hand when you need it.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Get Help
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Composant CAPTCHA - Aquarelle/Artistique

Un composant CAPTCHA simple et réactif avec un design aquarelle/artistique, une palette de couleurs à contraste élevé et une prise en charge du mode sombre, adapté aux applications industrielles/manufacturières.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">

  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden relative border border-solid border-gray-300 dark:border-gray-700
              bg-gradient-to-br from-blue-50 dark:from-blue-950 to-purple-50 dark:to-purple-950
              transform transition-all duration-300 hover:scale-[1.01]">

    <!-- Artistic Background Elements (simulated with layered divs and subtle effects) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-teal-200 dark:bg-teal-800 rounded-full mix-blend-multiply filter blur-lg opacity-60"></div>
    </div>

    <div class="relative z-10 p-8">
      <h2 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4 text-center tracking-tight leading-tight"
          style="font-family: 'Times New Roman', serif;">Security Check</h2>
      <p class="text-sm text-gray-700 dark:text-gray-300 mb-6 text-center leading-relaxed">
        To proceed, please verify you are human.
      </p>

      <div class="flex flex-col items-center mb-6">
        <!-- CAPTCHA Image Placeholder -->
        <div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden border border-purple-400 dark:border-purple-600 shadow-md mb-4 flex items-center justify-center relative">
          <img src="https://picsum.photos/300/150?blur=5&random=1" alt="CAPTCHA Challenge" class="absolute inset-0 w-full h-full object-cover filter brightness-75 dark:brightness-50 opacity-80">
          <span class="relative z-10 text-3xl font-bold italic text-white dark:text-gray-200 tracking-wider select-none transform -rotate-3 blur-[0.7px]">
            A0bK9x
          </span>
        </div>

        <button class="flex items-center text-sm font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 transition duration-200 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7 0 0116 0V3a1 1 0 112 0v2.101a7.002 7 0 01-16 0V3a1 1 0 011-1zm6 4a4 4 0 100 8a4 4 0 000-8zm0 2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd" />
          </svg>
          Get a new challenge
        </button>
      </div>

      <form>
        <label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Enter the characters</label>
        <input type="text" id="captcha-input" placeholder="Enter the characters above" class="w-full px-4 py-2 mb-4 text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-2 border-purple-500 dark:border-purple-400 rounded-md shadow-sm
                focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent
                placeholder-gray-400 dark:placeholder-gray-500 transition duration-200 ease-in-out text-center tracking-wider font-semibold">

        <button type="submit" class="w-full py-2 px-4 rounded-md text-lg font-bold text-white shadow-lg
                bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all duration-300 ease-in-out
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900
                transform hover:scale-[1.02]">Verify</button>
      </form>
    </div>
  </div>
</div>

Composant Boutons

Composant de bouton simple et réactif avec un design en niveaux de gris inspiré du papier/de l’impression, adapté aux plates-formes éducatives, prenant en charge les modes clair et sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-[200px] flex items-center justify-center font-sans">
  <div class="max-w-xl w-full mx-auto p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 leading-relaxed">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight leading-tight">
      Lesson Navigation
    </h2>
    <div class="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
      <button type="button" class="transition-all duration-300 ease-in-out
        flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
        bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100
        border border-gray-300 dark:border-gray-600 rounded-md
        shadow-sm hover:shadow-md
        hover:bg-gray-50 dark:hover:bg-gray-600
        focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
        active:bg-gray-100 dark:active:bg-gray-700/80
        whitespace-nowrap text-center
        relative group overflow-hidden">
        <span class="absolute inset-0 border-white dark:border-gray-800 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
        Previous Lesson
      </button>
      <button type="button" class="transition-all duration-300 ease-in-out
        flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
        bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900
        border border-gray-800 dark:border-gray-100 rounded-md
        shadow-md hover:shadow-lg
        hover:bg-gray-700 dark:hover:bg-gray-200
        focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
        active:bg-gray-900 dark:active:bg-gray-300
        whitespace-nowrap text-center
        relative group overflow-hidden">
        <span class="absolute inset-0 border-gray-800 dark:border-gray-100 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
        Next Lesson
      </button>
    </div>
    <div class="mt-6 sm:mt-8 text-center">
      <a href="#" class="inline-flex items-center text-base sm:text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2 -ml-1" 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 6h16M4 12h16M4 18h16"></path>
        </svg>
        View All Lessons
      </a>
    </div>
  </div>
</div>

Composant de comparaison de produits

Un composant de comparaison de produits complexe et réactif avec un design inspiré de l’agriculture et de la nature, une palette de couleurs complémentaires, une prise en charge du mode sombre et adapté aux applications de sport et de fitness. Présente des lignes fluides et des formes naturelles.

Ouvrir Aperçu

                <div class="bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-950 dark:to-teal-950 py-16 px-4 sm:px-6 lg:px-8 font-sans overflow-hidden">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-green-800 dark:text-green-300 mb-12 sm:mb-16 tracking-tight drop-shadow-lg leading-tight">
      Trophy Showdown: Choose Your Champion
    </h2>

    <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-12 items-stretch justify-center">

      <!-- Product 1: Elite Performance -->
      <div class="flex-1 w-full max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden mb-12 lg:mb-0 transform hover:scale-102 transition-transform duration-500 ease-in-out border-4 border-green-400 dark:border-green-600 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-green-100/50 to-blue-100/50 dark:from-gray-900/50 dark:to-teal-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
        <div class="p-8 sm:p-10 relative z-10">
          <div class="text-center mb-8">
            <span class="inline-block bg-green-500 dark:bg-green-700 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide mb-4 transform -rotate-3 hover:rotate-3 transition-transform duration-300">Elite Performance</span>
            <h3 class="text-3xl font-bold text-green-900 dark:text-green-200 mb-2 leading-tight">Apex Athlete Pro</h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg">Unleash your full potential.</p>
          </div>

          <div class="mb-8 relative flex justify-center items-center h-48 sm:h-64 overflow-hidden rounded-xl bg-gradient-to-br from-green-200 to-blue-200 dark:from-green-800 dark:to-blue-800">
            <img src="https://picsum.photos/400/300?random=1" alt="Apex Athlete Pro product image" class="w-full h-full object-cover object-center transform scale-100 group-hover:scale-105 transition-transform duration-700 ease-out rounded-xl blur-sm group-hover:blur-none">
            <div class="absolute inset-0 flex items-center justify-center">
              <svg class="w-16 h-16 text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-60 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </div>
          </div>

          <ul class="space-y-4 mb-10 text-gray-700 dark:text-gray-300 text-lg">
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Dynamic Bio-feedback System</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">AI-Powered Training Coach</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Hydro-Resistant Durability</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">One Year Premium Subscription</span>
            </li>
          </ul>

          <div class="flex justify-center flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar 1" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110" />
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar 2" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar 3" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-4">Trusted by 100K+ athletes.</span>
          </div>

          <button class="w-full flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-2xl text-white bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 md:py-4 md:text-lg md:px-10 shadow-lg transform active:scale-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:-translate-y-1">
            Select Apex Pro
            <svg class="ml-3 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Comparison Connector -->
      <div class="flex justify-center items-center mx-auto text-center w-full lg:w-auto mb-12 lg:mb-0">
        <div class="w-24 h-24 lg:w-32 lg:h-32 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-700 dark:to-blue-700 rounded-full flex items-center justify-center text-white text-3xl font-bold border-4 border-white dark:border-gray-900 shadow-2xl animate-pulse flex-shrink-0">
          VS
        </div>
        <div class="hidden lg:block w-4 h-full bg-gradient-to-t from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600 rounded-full mx-4 xl:mx-8 shadow-inner"></div>
      </div>

      <!-- Product 2: Peak Challenger -->
      <div class="flex-1 w-full max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform hover:scale-102 transition-transform duration-500 ease-in-out border-4 border-blue-400 dark:border-blue-600 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-100/50 to-orange-100/50 dark:from-gray-900/50 dark:to-orange-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
        <div class="p-8 sm:p-10 relative z-10">
          <div class="text-center mb-8">
            <span class="inline-block bg-blue-500 dark:bg-blue-700 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide mb-4 transform rotate-3 hover:-rotate-3 transition-transform duration-300">Peak Challenger</span>
            <h3 class="text-3xl font-bold text-blue-900 dark:text-blue-200 mb-2 leading-tight">Zenith Force Max</h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg">Conquer new limits.</p>
          </div>
          
          <div class="mb-8 relative flex justify-center items-center h-48 sm:h-64 overflow-hidden rounded-xl bg-gradient-to-br from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800">
            <img src="https://picsum.photos/400/300?random=2" alt="Zenith Force Max product image" class="w-full h-full object-cover object-center transform scale-100 group-hover:scale-105 transition-transform duration-700 ease-out rounded-xl blur-sm group-hover:blur-none">
            <div class="absolute inset-0 flex items-center justify-center">
              <svg class="w-16 h-16 text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-60 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </div>
          </div>

          <ul class="space-y-4 mb-10 text-gray-700 dark:text-gray-300 text-lg">
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Advanced Calorie Tracking</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Real-time Heart Rate Monitoring</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Adaptive Workout Routines</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Six Months Premium Subscription</span>
            </li>
          </ul>

          <div class="flex justify-center flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8">
            <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar 4" class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 shadow-md transition-transform transform hover:scale-110" />
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar 5" class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-4">Empowering 75K+ successes.</span>
          </div>

          <button class="w-full flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-2xl text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 md:py-4 md:text-lg md:px-10 shadow-lg transform active:scale-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:-translate-y-1">
            Choose Zenith Max
            <svg class="ml-3 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

    </div>

    <div class="mt-20 text-center">
      <h3 class="text-3xl font-bold text-green-900 dark:text-green-300 mb-6">Need more detail?</h3>
      <p class="text-lg text-gray-700 dark:text-gray-400 max-w-2xl mx-auto mb-8">
        Dive deeper into the specifications with our comprehensive chart below or contact our sports tech experts for personalized advice.
      </p>
      <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 dark:from-green-700 dark:to-blue-700 dark:hover:from-green-800 dark:hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400 dark:focus:ring-green-600 transform hover:-translate-y-1 transition-all duration-300 ease-out">
        <svg class="-ml-1 mr-3 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        View Full Comparison Chart
      </button>
    </div>

  </div>
</div>

Barre de progression de fitness sportif en niveaux de gris 3D

Un composant complexe de barre de progression en 3D en niveaux de gris conçu pour les applications de sport et de fitness, montrant la progression de l’entraînement avec profondeur et engagement visuel. Il inclut la prise en charge du mode sombre et est entièrement réactif.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in-up">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-tight">Daily Training Progress</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <!-- Overall Progress Section -->
        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
          <div class="relative z-10">
            <p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Overall Goal</p>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Week 3/12 Training Cycle</h3>

            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 65%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">65% Complete</span>
            </div>

            <div class="mt-4 text-center">
              <button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                View Full Roadmap
              </button>
            </div>
          </div>
        </div>

        <!-- Daily Progress Section -->
        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
          <div class="relative z-10">
            <p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Daily Target</p>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Today's Session: Legs & Core</h3>

            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 80%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">80% Done</span>
            </div>

            <div class="mt-4 text-center">
              <button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                Log Workout
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Individual Metrics Progress Bars -->
      <div class="mb-8">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center">Key Performance Indicators</h3>
        <div class="space-y-6">

          <!-- Metric 1: Strength -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 75%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Strength</span>
                <span>75%</span>
              </div>
            </div>
          </div>

          <!-- Metric 2: Endurance -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 85%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Endurance</span>
                <span>85%</span>
              </div>
            </div>
          </div>

          <!-- Metric 3: Flexibility -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 60%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Flexibility</span>
                <span>60%</span>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Call to Action / Next Steps -->
      <div class="text-center bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-lg relative overflow-hidden group">
        <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
        <div class="relative z-10">
          <p class="text-gray-700 dark:text-gray-200 mb-4 text-lg">Ready for your next challenge?</p>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold py-3 px-8 rounded-full text-lg shadow-xl uppercase tracking-wider transform transition duration-300 hover:scale-105 hover:bg-gray-700 dark:hover:bg-white focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
            Plan Next Workout
          </button>
        </div>
      </div>

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

<style>
  /* Custom utility for inner shadow, simulating 3D depth */
  .shadow-inset-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
  }

  .dark .shadow-inset-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
  }

  @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;
  }

  .blend-overlay {
    mix-blend-mode: overlay;
  }
</style>

Composant du système d’évaluation

Un composant de système d’évaluation simple et réactif avec des tons sépia/bruns, une prise en charge du mode sombre et un style axé sur la micro-interaction, adapté aux sites Web gouvernementaux/de services publics.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-brown-50 dark:bg-stone-900 min-h-screen font-sans">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-white dark:bg-stone-800 transition-colors duration-300 transform hover:scale-105">
    <h2 class="text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-4 text-center">Rate Our Service</h2>
    <p class="text-sm text-stone-600 dark:text-stone-300 mb-6 text-center">Your feedback helps us improve public services.</p>

    <div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
      <!-- Star 1 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>
      
      <!-- Star 2 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 3 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 4 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 5 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>
    </div>

    <button class="w-full py-3 rounded-md bg-stone-700 text-white dark:bg-amber-700 dark:text-stone-100 hover:bg-stone-800 dark:hover:bg-amber-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-amber-500 transform hover:scale-105 active:scale-95">
      Submit Rating
    </button>
  </div>
</div>

Composant d’alerte de délai d’expiration de session - Arc-en-ciel neumorphe

Un composant Neumorphic Session Timeout Alert pour les applications de rencontres/sociales avec un schéma de couleurs arc-en-ciel dégradé. Il est réactif et prend en charge le mode sombre, incitant les utilisateurs à prolonger leur session ou à se déconnecter.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-red-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
  <div class="relative w-full max-w-sm mx-auto p-6 rounded-3xl shadow-xl neumorphic-rainbow-light dark:neumorphic-rainbow-dark md:max-w-md lg:max-w-lg">
    <div class="flex justify-center mb-6">
      <div class="w-20 h-20 rounded-full flex items-center justify-center neumorphic-icon-light dark:neumorphic-icon-dark">
        <svg class="w-10 h-10 text-red-500 transition-colors duration-300 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.542 2.768-1.542 3.533 0l3.057 6.164a4.5 4.5 0 01-.815 4.795L10 18.067l-5.025-4.009a4.5 4.5 0 01-.815-4.795l3.057-6.164z" clip-rule="evenodd"></path>
        </svg>
      </div>
    </div>

    <h2 class="text-center text-3xl font-extrabold text-gray-800 mb-4 bg-clip-text text-transparent neumorphic-rainbow-text-light dark:neumorphic-rainbow-text-dark transition-colors duration-300">
      Session Timeout
    </h2>
    <p class="text-center text-lg text-gray-700 mb-8 dark:text-gray-300 transition-colors duration-300">
      Your session is about to expire due to inactivity.
    </p>

    <div class="flex justify-around space-x-4">
      <button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
        <span class="block">Extend Session</span>
        <span class="block text-sm opacity-75"> (5:00)</span>
      </button>
      <button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
        Log Out
      </button>
    </div>

    <p class="text-center text-sm text-gray-500 mt-8 dark:text-gray-400 transition-colors duration-300">
      For your security, we automatically log you out after inactivity.
    </p>
  </div>

  <style>
    .neumorphic-rainbow-light {
      background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
      box-shadow: 10px 10px 20px #c7c7c7, -10px -10px 20px #ffffff, inset 0 0 0 #f0f0f0, inset 0 0 0 #e0e0e0;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .dark .neumorphic-rainbow-dark {
      background: linear-gradient(145deg, #2b2b2b, #202020);
      box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #313131, inset 0 0 0 #2b2b2b, inset 0 0 0 #202020;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .neumorphic-icon-light {
      background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
      box-shadow: inset 5px 5px 10px #c7c7c7, inset -5px -5px 10px #ffffff;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .dark .neumorphic-icon-dark {
      background: linear-gradient(145deg, #202020, #2b2b2b);
      box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .neumorphic-button-light {
      background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
      box-shadow: 7px 7px 14px #c2c2c2, -7px -7px 14px #ffffff;
    }
    .neumorphic-button-light:hover {
      box-shadow: 5px 5px 10px #c2c2c2, -5px -5px 10px #ffffff;
    }
    .neumorphic-button-light:active {
      box-shadow: inset 5px 5px 10px #c2c2c2, inset -5px -5px 10px #ffffff;
    }

    .dark .neumorphic-button-dark {
      background: linear-gradient(145deg, #2b2b2b, #202020);
      box-shadow: 7px 7px 14px #1a1a1a, -7px -7px 14px #313131;
    }
    .dark .neumorphic-button-dark:hover {
      box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #313131;
    }
    .dark .neumorphic-button-dark:active {
      box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
    }

    .neumorphic-rainbow-text-light {
      background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
    }
    .dark .neumorphic-rainbow-text-dark {
      background-image: linear-gradient(to right, #fee2e2, #fcd34d, #fef08a, #dcfce7, #bfdbfe, #c7d2fe, #e9d5ff);
    }

    .neumorphic-text-button-light {
      background-clip: text;
      color: transparent;
      background-image: linear-gradient(to right, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #4f46e5, #9333ea);
    }
    .dark .neumorphic-text-button-dark {
      background-clip: text;
      color: transparent;
      background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
    }
  </style>
</div>

1 ... 34 35 36 37 38 ... 335

Rechercher des composants

Catégories

Tous les composants