Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de carte de site neumorphique

Un composant de plan de site complexe et réactif conçu dans un style neumorphe avec des tons de bijoux, adapté aux sites Web gouvernementaux ou de services publics, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-emerald-100 to-teal-200 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 font-sans">

  <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-800 dark:text-emerald-400 mb-12 text-center drop-shadow-lg leading-tight">
      <span class="block">Our Services & Resources</span>
      <span class="block text-2xl sm:text-3xl text-sapphire-700 dark:text-sapphire-300 font-semibold mt-2">Site Map & Quick Links</span>
    </h1>

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

      <!-- Category 1: Public Services -->
      <section class="rounded-3xl p-8 bg-gradient-to-br from-emerald-50 via-emerald-100 to-emerald-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
                      shadow-emerald-300/60 dark:shadow-gray-950/80
                      hover:shadow-emerald-400/70 dark:hover:shadow-black/70
                      active:shadow-inner active:shadow-emerald-400/40 dark:active:shadow-gray-700/60
                      transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-102">
        <h2 class="text-3xl font-bold mb-6 text-emerald-800 dark:text-emerald-400 border-b-2 border-emerald-400/50 dark:border-emerald-700/50 pb-4 flex items-center">
          <svg class="w-8 h-8 mr-3 text-emerald-600 dark:text-emerald-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6.5 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM12.5 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM7 14.5a3 3 0 016 0H7z" clip-rule="evenodd"></path>
          </svg>
          Public Services
        </h2>
        <nav aria-label="Public Services Links">
          <ul class="space-y-4">
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
                </span>
                Apply for Permits & Licenses
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
                </span>
                Report an Issue
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.555 17.555A.75.75 0 0117 18H3a1 1 0 00-1 1v1h16v-1a1 1 0 00-1-1h-.555zM15 9a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                </span>
                Resident Services & Benefits
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
                </span>
                Pay Bills & Fines Online
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 9a1 1 0 100-2 1 1 0 000 2zM12 9a1 1 0 100-2 1 1 0 000 2zM11 11a1 1 0 100-2 1 1 0 000 2zM7 11a1 1 0 100-2 1 1 0 000 2zM12.95 18H7.05a2.05 2.05 0 01-1.88-2.95l.59-.97a1 1 0 00-.73-1.63H4c-.75 0-1.4.52-1.7.35a.5.5 0 00-.3 0h-.3a.5.5 0 00-.4 0c-.3-.22-.7 0-1 0a.5.5 0 00-.4.35C.65 12.33.65 11.2 1 10c.32-.4.8-1.5 1.5-.75-.24.3-.78 1.1-1.3 1.6-.2.18-.3.4-.3.6a.5.5 0 00.1.35c.2.2.4.2.6.2.2 0 .4-.2.6-.2a.5.5 0 00.35-.1.5.5 0 00.35-.1a.5.5 0 00.3-.1a.5.5 0 00.3-.1c.2-.05.4-.1.6-.1.2 0 .4 0 .6.05.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1c.15-.02.4-.02.6 0 .2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.45.05.65.05.2-.02.4-.02.6 0 .2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02c.22-.02.4-.05.6 0 .2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05a2 2 0 00-1.89-2.95l-.59-.97a1 1 0 01.73-1.63H16c.75 0 1.4.52 1.7.35a.5.5 0 00.3 0h.3a.5.5 0 00.4 0c.3-.22.7 0 1 0a.5.5 0 00.4.35c.35.7.35 1.83 0 3.03-.32.4-.8 1.5-1.5.75.24-.3.78-1.1 1.3-1.6.2-.18.3-.4.3-.6a.5.5 0 00-.1-.35c-.2-.2-.4-.2-.6-.2-.2 0-.4.2-.6.2a.5.5 0 00-.35.1.5.5 0 00-.35.1a.5.5 0 00-.3.1a.5.5 0 00-.3.1c-.2.05-.4.1-.6.1-.2 0-.4 0-.6-.05z" clip-rule="evenodd"></path></svg>
                </span>
                Public Safety Information
              </a>
            </li>
          </ul>
        </nav>
      </section>

      <!-- Category 2: Government & Administration -->
      <section class="rounded-3xl p-8 bg-gradient-to-br from-sapphire-50 via-sapphire-100 to-sapphire-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
                      shadow-sapphire-300/60 dark:shadow-gray-950/80
                      hover:shadow-sapphire-400/70 dark:hover:shadow-black/70
                      active:shadow-inner active:shadow-sapphire-400/40 dark:active:shadow-gray-700/60
                      transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-102">
        <h2 class="text-3xl font-bold mb-6 text-sapphire-800 dark:text-sapphire-400 border-b-2 border-sapphire-400/50 dark:border-sapphire-700/50 pb-4 flex items-center">
          <svg class="w-8 h-8 mr-3 text-sapphire-600 dark:text-sapphire-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm11.5 5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM10 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
          </svg>
          Government & Administration
        </h2>
        <nav aria-label="Government & Administration Links">
          <ul class="space-y-4">
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 002-2v-4a2 2 0 00-2-2H4zm.5 10c0 1.1-.9 2-2 2H2v2h2.5c1.38 0 2.5-1.12 2.5-2.5V14h-2.5zM16 14.5a2.5 2.5 0 00-2.5-2.5H14v2.5A2.5 2.5 0 0016.5 17H18v-2h-1.5c-1.1 0-2 .9-2 2z" clip-rule="evenodd"></path></svg>
                </span>
                Departments & Agencies
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
                </span>
                Official Documents & Forms
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
                </span>
                City Council & Meetings
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h2a2 2 0 012 2v5a2 2 0 01-2 2H2a2 2 0 01-2-2V6a2 2 0 012-2h2V3a1 1 0 011-1zm3 11a1 1 0 100 2h4a1 1 0 100-2h-4z" clip-rule="evenodd"></path></svg>
                </span>
                Elections & Voter Information
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v3.586l-.707.707A1 1 0 014 11.586V13a2 2 0 002 2h8a2 2 0 002-2v-1.414l-.707-.707A1 1 0 0114 9.586V6a4 4 0 00-4-4zM8 12.586l1.707 1.707A1 1 0 0011.707 13H14a1 1 0 011 1v1a1 1 0 01-1 1H6a1 1 0 01-1-1v-1a1 1 0 011-1h2.293L8 12.586z" clip-rule="evenodd"></path></svg>
                </span>
                Careers & Job Opportunities
              </a>
            </li>
          </ul>
        </nav>
      </section>

      <!-- Category 3: Community & Culture -->
      <section class="rounded-3xl p-8 bg-gradient-to-br from-ruby-50 via-ruby-100 to-ruby-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
                      shadow-ruby-300/60 dark:shadow-gray-950/80
                      hover:shadow-ruby-400/70 dark:hover:shadow-black/70
                      active:shadow-inner active:shadow-ruby-400/40 dark:active:shadow-gray-700/60
                      transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-102">
        <h2 class="text-3xl font-bold mb-6 text-ruby-800 dark:text-rose-400 border-b-2 border-ruby-400/50 dark:border-ruby-700/50 pb-4 flex items-center">
          <svg class="w-8 h-8 mr-3 text-ruby-600 dark:text-rose-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M19.969 8.784L1.031 3.551A.75.75 0 000 4.24v9.52c0 .65.756 1.002 1.309.689l18.938-5.233a.75.75 0 00.722-.685V9.467a.75.75 0 00-.731-.683zM3.486 9.387l15.026 4.148L3.486 16.53z" clip-rule="evenodd"></path>
          </svg>
          Community & Culture
        </h2>
        <nav aria-label="Community & Culture Links">
          <ul class="space-y-4">
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 100 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                </span>
                Parks & Recreation
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                </span>
                Libraries & Museums
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2V7a5 5 0 00-5-5zm-5 7H7v2a3 3 0 013 3h0a3 3 0 013-3V9h2V7a3 3 0 00-3-3H7a3 3 0 00-3 3v2z"></path></svg>
                </span>
                Events & Calendar
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6z"></path></svg>
                </span>
                Community Programs
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <img class="w-5 h-5 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Community Leader">
                </span>
                Volunteer Opportunities
              </a>
            </li>
          </ul>
        </nav>
      </section>

    </div>

    <!-- Contact and Feedback Section -->
    <section class="mt-12 rounded-3xl p-8 bg-gradient-to-br from-indigo-50 via-indigo-100 to-indigo-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
                    shadow-indigo-300/60 dark:shadow-gray-950/80
                    hover:shadow-indigo-400/70 dark:hover:shadow-black/70
                    active:shadow-inner active:shadow-indigo-400/40 dark:active:shadow-gray-700/60
                    transition-all duration-300 ease-in-out">
      <h2 class="text-3xl font-bold mb-6 text-indigo-800 dark:text-indigo-400 border-b-2 border-indigo-400/50 dark:border-indigo-700/50 pb-4 flex items-center">
        <svg class="w-8 h-8 mr-3 text-indigo-600 dark:text-indigo-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M2.928 6.78C3.766 6.3 4.819 6 6 6h.001C10.607 6 15 10.428 15 16v.001c-.134 1.181-.72 2.302-1.63 3.212-.553.553-1.226 1.012-1.97 1.34L12 20a1 1 0 01-1 1h-1a1 1 0 01-1-1v-.001a4 4 0 00-.775-1.571c-.744-.756-1.527-1.396-2.618-1.516L5 16h-.001a5.002 5.002 0 01-3.64-1.583C.81 13.914.515 12.8.515 11.5V11a.5.5 0 010-.001C.515 9.77.771 8.583 1.258 7.55zM17 12a1 1 0 10-2 0v-.586l.707-.707a1 1 0 000-1.414L15 8.586V8a1 1 0 10-2 0v.586l-.707-.707a1 1 0 00-1.414 0l-.707.707L10.586 8H10a1 1 0 10-2 0H7.414l-.707.707a1 1 0 000 1.414L7.414 10H8a1 1 0 100 2H7.414l-.707.707a1 1 0 000 1.414L7 14.586V15a1 1 0 102 0v-.586l.707-.707a1 1 0 001.414 0l.707.707L11.414 15H12a1 1 0 102 0h.586l.707-.707a1 1 0 000-1.414L15.414 12H16a1 1 0 100-2H15.414l.707-.707a1 1 0 000-1.414L16.414 8H17a1 1 0 100-2h-.586l-.707-.707a1 1 0 00-1.414 0L14.586 6H14a1 1 0 10-2 0h-1.414l-.707-.707a1 1 0 00-1.414 0L8.586 6H8a1 1 0 10-2 0H5.414l-.707-.707a1 1 0 00-1.414 0L3.414 6H3a1 1 0 100 2h.586l.707.707a1 1 0 000 1.414L4.586 10H5a1 1 0 100 2H4.586l-.707.707a1 1 0 000 1.414L4 14.586V15a1 1 0 100 2H3.414l-.707-.707a1 1 0 00-1.414 0L1.414 16H1a1 1 0 100 2h.586l.707.707a1 1 0 000 1.414L2.414 18H3a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L4.586 18H5a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L6.414 18H7a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L8.414 18H9a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L10.586 18H11a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L12.414 18H13a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L14.414 18H15a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L16.414 18H17a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L18.414 18H19a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L20.414 18H21a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L22.414 18H23a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L24.414 18H25a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L26.414 18H27a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L28.414 18H29a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L30.414 18H31a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L32.414 18H33a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L34.414 18H35a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L36.414 18H37a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L38.414 18H39a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L40.414 18H41a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L42.414 18H43a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L44.414 18H45a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L46.414 18H47a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L48.414 18H49a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L50.414 18H51a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L52.414 18H53a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L54.414 18H55a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L56.414 18H57a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L58.414 18H59a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L60.414 18H61a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L62.414 18H63a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L64.414 18H65a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L66.414 18H67a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L68.414 18H69a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L70.414 18H71a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L72.414 18H73a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L74.414 18H75a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L76.414 18H77a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L78.414 18H79a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L80.414 18H81a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L82.414 18H83a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L84.414 18H85a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L86.414 18H87a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L88.414 18H89a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L90.414 18H91a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L92.414 18H93a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L94.414 18H95a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L96.414 18H97a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L98.414 18H99a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L100.414 18H101a1 1 0 100 2h-.586l-.707.707a1 1 0 000 1.414L100.414 20H99a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L98.414 16H97a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L96.414 14H95a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L94.414 12H93a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L92.414 10H91a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L90.414 8H89a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L88.414 6H87a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L86.414 4H85a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L84.414 2H83a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L82.414 2H81a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L80.414 2H79a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L78.414 2H77a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L76.414 2H75a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L74.414 2H73a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L72.414 2H71a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L70.414 2H69a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L68.414 2H67a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L66.414 2H65a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L64.414 2H63a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L62.414 2H61a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L60.414 2H59a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L58.414 2H57a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L56.414 2H55a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L54.414 2H53a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L52.414 2H51a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L50.414 2H49a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L48.414 2H47a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L46.414 2H45a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L44.414 2H43a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L42.414 2H41a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L40.414 2H39a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L38.414 2H37a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L36.414 2H35a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L34.414 2H33a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L32.414 2H31a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L30.414 2H29a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L28.414 2H27a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L26.414 2H25a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L24.414 2H23a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L22.414 2H21a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L20.414 2H19a1 1 0 100 2h-.586l.707-.707a1 1 0 000-1.414L18.414 2H17a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L16.414 2H15a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L14.414 2H13a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L12.414 2H11a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L10.414 2H9a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L8.414 2H7a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L6.414 2H5a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L4.414 2H3a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L2.414 2H3a1 1 0 100 2h-.586l-.707-.707a1 1 0 00-.707-.707A.5.5 0 002 2z" clip-rule="evenodd"></path></svg>
        Connect With Us
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <div class="rounded-2xl p-6 bg-indigo-200/50 dark:bg-gray-800/50 shadow-md dark:shadow-xl">
          <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-3">General Inquiries</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-2">Email: <a href="mailto:[email protected]" class="text-indigo-600 dark:text-indigo-400 hover:underline">[email protected]</a></p>
          <p class="text-gray-700 dark:text-gray-300">Phone: <a href="tel:+15551234567" class="text-indigo-600 dark:text-indigo-400 hover:underline">(555) 123-4567</a></p>
        </div>
        <div class="rounded-2xl p-6 bg-indigo-200/50 dark:bg-gray-800/50 shadow-md dark:shadow-xl">
          <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-3">Office Hours</h3>
          <p class="text-gray-700 dark:text-gray-300">Monday - Friday: 9:00 AM - 5:00 PM</p>
          <p class="text-gray-700 dark:text-gray-300">Saturday - Sunday: Closed</p>
        </div>

        <div class="rounded-2xl p-6 bg-indigo-200/50 dark:bg-gray-800/50 shadow-md dark:shadow-xl">
          <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-3">Visit Our Office</h3>
          <p class="text-gray-700 dark:text-gray-300">123 Main Street, Anytown, ST 12345</p>
          <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline mt-2 inline-block">Get Directions</a>
        </div>
      </div>

      <form class="grid grid-cols-1 md:grid-cols-2 gap-6 rounded-2xl p-6 bg-indigo-100/50 dark:bg-gray-800/70 shadow-inner dark:shadow-lg">
        <div class="md:col-span-2">
          <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-4">Send Us Feedback</h3>
        </div>
        <div>
          <label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Name:</label>
          <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 bg-emerald-50 dark:bg-gray-700 border border-transparent
                 shadow-inner shadow-emerald-200/70 dark:shadow-gray-900/60
                 focus:outline-none focus:ring-2 focus:ring-sapphire-500/70 focus:border-transparent
                 transition-shadow duration-200" placeholder="John Doe">
        </div>
        <div>
          <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Email:</label>
          <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 bg-emerald-50 dark:bg-gray-700 border border-transparent
                 shadow-inner shadow-emerald-200/70 dark:shadow-gray-900/60
                 focus:outline-none focus:ring-2 focus:ring-sapphire-500/70 focus:border-transparent
                 transition-shadow duration-200" placeholder="[email protected]">
        </div>
        <div class="md:col-span-2">
          <label for="message" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Message:</label>
          <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 bg-emerald-50 dark:bg-gray-700 border border-transparent
                    shadow-inner shadow-emerald-200/70 dark:shadow-gray-900/60
                    focus:outline-none focus:ring-2 focus:ring-sapphire-500/70 focus:border-transparent
                    transition-shadow duration-200" placeholder="Type your message here..."></textarea>
        </div>
        <div class="md:col-span-2 text-center">
          <button type="submit" class="inline-flex items-center px-8 py-3 rounded-xl text-lg font-bold
                     bg-emerald-600 text-white dark:bg-sapphire-600 dark:text-white
                     shadow-lg shadow-emerald-400/60 dark:shadow-sapphire-900/60
                     hover:bg-emerald-700 dark:hover:bg-sapphire-700
                     hover:scale-105 active:scale-95 active:shadow-inner active:shadow-emerald-700/40 dark:active:shadow-sapphire-900/40
                     transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-sapphire-800">
            <svg class="w-6 h-6 mr-3 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l.649-.186.931-2.022 1.347.865a1 1 0 001.455-.008l4.475-4.475 2.022-.931.186-.649a1 1 0 00-1.409-1.169l-14-7z"></path></svg>
            Send Message
          </button>
        </div>
      </form>
    </section>

    <!-- Placeholder for related content / images -->
    <section class="mt-12 text-center">
      <h2 class="text-3xl font-bold text-sapphire-800 dark:text-sapphire-400 mb-6">Related Information</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
                     shadow-sapphire-200/50 dark:shadow-gray-950/70
                     hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
                     transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          <img src="https://picsum.photos/id/600/300/200" alt="Placeholder image for city hall" class="w-full h-40 object-cover">
          <div class="p-4">
            <h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">City Hall Directory</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">Find contact information for all city departments.</p>
            <a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More &rarr;</a>
          </div>
        </div>
        <div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
                     shadow-sapphire-200/50 dark:shadow-gray-950/70
                     hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
                     transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          <img src="https://picsum.photos/id/400/300/200" alt="Placeholder image for local park" class="w-full h-40 object-cover">
          <div class="p-4">
            <h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">Local Park Initiatives</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">Discover new projects planned for our community parks.</p>
            <a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More &rarr;</a>
          </div>
        </div>
        <div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
                     shadow-sapphire-200/50 dark:shadow-gray-950/70
                     hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
                     transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          <img src="https://picsum.photos/id/200/300/200" alt="Placeholder image for library" class="w-full h-40 object-cover">
          <div class="p-4">
            <h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">Library Services Update</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">Explore digital resources and upcoming library events.</p>
            <a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More &rarr;</a>
          </div>
        </div>
        <div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
                     shadow-sapphire-200/50 dark:shadow-gray-950/70
                     hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
                     transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          <img src="https://picsum.photos/id/100/300/200" alt="Placeholder image for community event" class="w-full h-40 object-cover">
          <div class="p-4">
            <h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">Upcoming Public Events</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">Check out the calendar for local gatherings and festivals.</p>
            <a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More &rarr;</a>
          </div>
        </div>
      </div>
    </section>

  </div>

  <!-- Dark mode toggle - For demonstration, can be a button elsewhere -->
  <div class="mt-12 text-center">
    <button onclick="document.documentElement.classList.toggle('dark')" class="px-6 py-2 rounded-full
      bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200
      shadow-md dark:shadow-xl
      hover:shadow-lg dark:hover:shadow-black
      active:shadow-inner dark:active:shadow-gray-700
      transition-all duration-300 ease-in-out font-medium">
      Toggle Dark Mode
    </button>
  </div>

  <style>
    /* Custom colors for Jewel Tones (adjust as needed for specific shades) */
    .text-emerald-800 { color: #047857; } /* green-700 */
    .dark .text-emerald-400 { color: #34d399; } /* green-400 */
    .border-emerald-400\/50 { border-color: rgba(74, 222, 128, 0.5); } /* green-400 with opacity */
    .dark .border-emerald-700\/50 { border-color: rgba(4 120 87, 0.5); } /* green-700 with opacity */
    .bg-emerald-50 { background-color: #ecfdf5; }
    .bg-emerald-100 { background-color: #d1fae5; }
    .bg-emerald-200 { background-color: #a7f3d0; }
    .bg-emerald-300\/40 { background-color: rgba(110, 231, 183, 0.4); } /* green-300 with opacity */
    .group-hover\:bg-emerald-400\/60:hover { background-color: rgba(74, 222, 128, 0.6); }
    .text-emerald-700 { color: #047857; /* green-700 */ }
    .dark .text-emerald-300 { color: #6ee7b7; }
    .shadow-emerald-300\/60 { box-shadow: 0 10px 15px -3px rgba(110, 231, 183, 0.6), 0 4px 6px -2px rgba(110, 231, 183, 0.6); }
    .hover\:shadow-emerald-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(74, 222, 128, 0.7), 0 4px 6px -2px rgba(74, 222, 128, 0.7); }
    .active\:shadow-inner\.shadow-emerald-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(74, 222, 128, 0.4); }
    .bg-emerald-600 { background-color: #059669; } /* green-600 */
    .shadow-emerald-400\/60 { box-shadow: 0 10px 15px -3px rgba(74, 222, 128, 0.6), 0 4px 6px -2px rgba(74, 222, 128, 0.6); }
    .hover\:bg-emerald-700:hover { background-color: #047857; }
    .active\:shadow-inner\.shadow-emerald-700\/40:active { box-shadow: inset 0 2px 4px 0 rgba(4, 120, 87, 0.4); }
    .focus\:ring-emerald-300:focus { --tw-ring-color: #a7f3d0 !important; }

    .text-sapphire-700 { color: #1d4ed8; } /* blue-700 */
    .dark .text-sapphire-300 { color: #93c5fd; } /* blue-300 */
    .text-sapphire-800 { color: #1e40af; } /* blue-800 */
    .dark .text-sapphire-400 { color: #60a5fa; } /* blue-400 */
    .border-sapphire-400\/50 { border-color: rgba(96, 165, 250, 0.5); }
    .dark .border-sapphire-700\/50 { border-color: rgba(29, 78, 216, 0.5); }
    .bg-sapphire-50 { background-color: #eff6ff; }
    .bg-sapphire-100 { background-color: #dbeafe; }
    .bg-sapphire-200 { background-color: #bfdbfe; }
    .bg-sapphire-300\/40 { background-color: rgba(147, 197, 253, 0.4); }
    .group-hover\:bg-sapphire-400\/60:hover { background-color: rgba(96, 165, 250, 0.6); }
    .shadow-sapphire-300\/60 { box-shadow: 0 10px 15px -3px rgba(147, 197, 253, 0.6), 0 4px 6px -2px rgba(147, 197, 253, 0.6); }
    .hover\:shadow-sapphire-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(96, 165, 250, 0.7), 0 4px 6px -2px rgba(96, 165, 250, 0.7); }
    .active\:shadow-inner\.shadow-sapphire-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(96, 165, 250, 0.4); }
    .bg-sapphire-600 { background-color: #2563eb; }
    .shadow-sapphire-900\/60 { box-shadow: 0 10px 15px -3px rgba(17, 24, 39, 0.6), 0 4px 6px -2px rgba(17, 24, 39, 0.6); }
    .hover\:bg-sapphire-700:hover { background-color: #1d4ed8; }
    .active\:shadow-inner\.shadow-sapphire-900\/40:active { box-shadow: inset 0 2px 4px 0 rgba(17, 24, 39, 0.4); }
    .focus\:ring-sapphire-800:focus { --tw-ring-color: #1e40af !important; }
    .focus\:ring-sapphire-500\/70:focus { --tw-ring-color: rgba(59, 130, 246, 0.7) !important; }

    .text-ruby-700 { color: #be123c; } /* rose-700 */
    .dark .text-rose-300 { color: #fda4af; } /* rose-300 */
    .text-ruby-800 { color: #9f1239; } /* rose-800 */
    .dark .text-rose-400 { color: #fb7185; } /* rose-400 */
    .border-ruby-400\/50 { border-color: rgba(251, 113, 133, 0.5); }
    .dark .border-ruby-700\/50 { border-color: rgba(190, 18, 60, 0.5); }
    .bg-ruby-50 { background-color: #fff1f2; }
    .bg-ruby-100 { background-color: #ffe4e6; }
    .bg-ruby-200 { background-color: #fecdd3; }
    .bg-ruby-300\/40 { background-color: rgba(253, 164, 175, 0.4); }
    .group-hover\:bg-ruby-400\/60:hover { background-color: rgba(251, 113, 133, 0.6); }
    .shadow-ruby-300\/60 { box-shadow: 0 10px 15px -3px rgba(253, 164, 175, 0.6), 0 4px 6px -2px rgba(253, 164, 175, 0.6); }
    .hover\:shadow-ruby-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(251, 113, 133, 0.7), 0 4px 6px -2px rgba(251, 113, 133, 0.7); }
    .active\:shadow-inner\.shadow-ruby-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(251, 113, 133, 0.4); }

    .bg-indigo-50 { background-color: #eef2ff; }
    .bg-indigo-100\/50 { background-color: rgba(224, 231, 255, 0.5); }
    .bg-indigo-200\/50 { background-color: rgba(199,210,254, 0.5); }
    .text-indigo-600 { color: #4f46e5; }
    .text-indigo-700 { color: #4338ca; }
    .text-indigo-800 { color: #3730a3; }
    .dark .text-indigo-300 { color: #a5b4fc; }
    .dark .text-indigo-400 { color: #818cf8; }
    .shadow-indigo-300\/60 { box-shadow: 0 10px 15px -3px rgba(165, 180, 252, 0.6), 0 4px 6px -2px rgba(165, 180, 252, 0.6); }
    .hover\:shadow-indigo-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(129, 140, 248, 0.7), 0 4px 6px -2px rgba(129, 140, 248, 0.7); }
    .active\:shadow-inner\.shadow-indigo-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(129, 140, 248, 0.4); }

    /* General neumorphism shadows */
    .shadow-xl {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
    }
    .dark .shadow-xl {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4), -10px -10px 20px rgba(255, 255, 255, 0.05);
    }

    .shadow-md {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.07), -5px -5px 10px rgba(255, 255, 255, 0.5);
    }
    .dark .shadow-md {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.03);
    }

    .shadow-inner {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.05), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
    }
    .dark .shadow-inner {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3), inset -5px -5px 10px rgba(255, 255, 255, 0.03);
    }

    /* Hover and Active states for neumorphism */
    .hover\:shadow-lg:hover {
        box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.12), -8px -8px 16px rgba(255, 255, 255, 0.75);
    }
    .dark .hover\:shadow-black:hover {
        box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5), -8px -8px 16px rgba(0, 0, 0, 0.1);
    }

    .active\:shadow-inner:active {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px rgba(255, 255, 255, 0.6);
    }
    .dark .active\:shadow-gray-700:active {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 10px rgba(255, 255, 255, 0.06);
    }


    /* Specific custom shadows for inputs for a deeper inner effect */
    .shadow-inner\.shadow-emerald-200\/70 {
        box-shadow: inset 5px 5px 10px rgba(220, 252, 231, 0.7), inset -5px -5px 10px rgba(255, 255, 255, 0.8);
    }
    .dark .shadow-inner\.shadow-gray-900\/60 {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6), inset -5px -5px 10px rgba(255, 255, 255, 0.07);
    }

  </style>
</div>

Memphis_Dating_Modal

Un composant modal complexe et réactif conçu dans un style Memphis/Retro pour les plateformes de rencontres et sociales, avec des couleurs vives, des formes géométriques, des éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 overflow-y-auto bg-gray-900 bg-opacity-75 flex items-center justify-center p-4 dark:bg-gray-950 dark:bg-opacity-85">
  <div class="relative w-full max-w-2xl mx-auto bg-white rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 scale-100 dark:bg-gray-800">
    <!-- Memphis Style Background Elements -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-purple-400 rounded-full dark:bg-purple-600 opacity-60 mix-blend-multiply dark:mix-blend-screen transform rotate-45"></div>
      <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-yellow-300 rounded-lg dark:bg-yellow-500 opacity-60 mix-blend-multiply dark:mix-blend-screen transform -rotate-15"></div>
      <div class="absolute top-1/4 left-1/3 w-32 h-32 bg-pink-400 rounded-full dark:bg-pink-600 opacity-60 mix-blend-multiply dark:mix-blend-screen transform rotate-30"></div>
      <div class="absolute bottom-1/4 right-1/3 w-24 h-24 bg-teal-300 rounded-xl dark:bg-teal-500 opacity-60 mix-blend-multiply dark:mix-blend-screen transform -rotate-25"></div>
    </div>

    <!-- Modal Content -->
    <div class="relative flex flex-col md:flex-row bg-white bg-opacity-80 p-6 md:p-8 rounded-lg dark:bg-gray-800 dark:bg-opacity-80 border-4 border-gray-200 dark:border-gray-700">
      <!-- Close Button -->
      <button type="button" class="absolute top-3 right-3 p-2 rounded-full text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>

      <!-- Profile Image Section -->
      <div class="w-full md:w-2/5 flex-shrink-0 mb-6 md:mb-0 md:mr-8 flex items-center justify-center">
        <div class="relative w-48 h-48 md:w-56 md:h-56 rounded-full overflow-hidden border-4 border-pink-500 dark:border-pink-600 shadow-lg">
          <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture">
          <div class="absolute inset-0 bg-gradient-to-t from-pink-500 to-transparent opacity-50"></div>
          <div class="absolute bottom-2 left-1/2 -translate-x-1/2 text-white font-bold text-xl drop-shadow-md">Sarah

Composant de la liste de souhaits Art Déco

Un composant complexe et réactif de la liste de souhaits de style Art Déco inspiré du luxe des années 1920-1930, avec des tons de bijoux adaptés aux interfaces finance/banque. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-emerald-400 to-teal-600 dark:from-gray-900 dark:to-teal-900 p-4 sm:p-6 md:p-8 font-serif text-white">
  <div class="max-w-7xl mx-auto bg-gradient-to-br from-teal-700 to-emerald-800 dark:from-gray-800 dark:to-teal-950 shadow-2xl rounded-xl border border-teal-500 dark:border-teal-700 overflow-hidden relative">
    <!-- Geometric Overlay - Top Left -->
    <div class="absolute top-0 left-0 w-32 h-32 bg-teal-600 opacity-20 dark:bg-teal-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg"></div>
    <div class="absolute top-2 left-2 w-24 h-24 bg-teal-500 opacity-30 dark:bg-teal-800 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg"></div>
    <!-- Geometric Overlay - Bottom Right -->
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-emerald-600 opacity-20 dark:bg-emerald-900 transform translate-x-1/2 translate-y-1/2 rotate-45 rounded-lg"></div>
    <div class="absolute bottom-2 right-2 w-24 h-24 bg-emerald-500 opacity-30 dark:bg-emerald-800 transform translate-x-1/2 translate-y-1/2 rotate-45 rounded-lg"></div>

    <div class="relative z-10 p-4 sm:p-6 md:p-10">
      <header class="flex flex-col sm:flex-row items-center justify-between pb-6 mb-8 border-b border-gold-400 dark:border-gold-700">
        <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gold-200 dark:text-gold-300 drop-shadow-lg p mb-4 sm:mb-0">
          <span class="block">Imperial &nbsp;Accrual</span>
          <span class="block text-xl sm:text-2xl mt-1">Your Refined Selections</span>
        </h1>
        <div class="flex space-x-4">
          <button class="px-4 py-2 sm:px-6 sm:py-3 bg-gold-500 hover:bg-gold-600 text-teal-900 font-semibold rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out border-2 border-gold-400 dark:border-gold-700">
            <svg class="inline-block mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            Add Item
          </button>
          <button class="px-4 py-2 sm:px-6 sm:py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out border-2 border-red-500 dark:border-red-800">
            <svg class="inline-block mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
            Clear All
          </button>
        </div>
      </header>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Filter & Sort Panel -->
        <aside class="md:col-span-1 bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 p-6 rounded-lg shadow-xl border border-teal-600 dark:border-teal-800">
          <h3 class="text-2xl font-semibold mb-4 text-gold-300 dark:text-gold-400 border-b pb-2 border-gold-500 dark:border-gold-700">Refine Prospects</h3>
          <div class="mb-6">
            <label for="category" class="block text-gold-200 text-lg mb-2">Category</label>
            <select id="category" class="w-full p-3 bg-teal-900 border border-teal-500 rounded-md text-white focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-800 dark:border-gray-600">
              <option value="all">All Assets</option>
              <option value="investments">Investments</option>
              <option value="property">Property</option>
              <option value="luxury">Luxury Goods</option>
              <option value="education">Education Funds</option>
            </select>
          </div>
          <div class="mb-6">
            <label for="status" class="block text-gold-200 text-lg mb-2">Status</label>
            <select id="status" class="w-full p-3 bg-teal-900 border border-teal-500 rounded-md text-white focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-800 dark:border-gray-600">
              <option value="all">All Statuses</option>
              <option value="pending">Pending</option>
              <option value="acquired">Acquired</option>
              <option value="rejected">Rejected</option>
            </select>
          </div>
          <div class="mb-6">
            <label for="sort" class="block text-gold-200 text-lg mb-2">Sort By</label>
            <select id="sort" class="w-full p-3 bg-teal-900 border border-teal-500 rounded-md text-white focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-800 dark:border-gray-600">
              <option value="date">Date Added</option>
              <option value="value-asc">Value: Low to High</option>
              <option value="value-desc">Value: High to Low</option>
            </select>
          </div>
          <button class="w-full px-4 py-3 bg-gold-600 hover:bg-gold-700 text-teal-900 font-semibold rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out border-2 border-gold-500 dark:border-gold-800">
            Apply Filters
          </button>
        </aside>

        <!-- Wishlist Items Grid -->
        <section class="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
          <!-- Wishlist Item 1 -->
          <div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
            <div class="relative h-48 overflow-hidden">
              <img src="https://picsum.photos/id/68/400/250" alt="Luxury Apartment" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Property</span>
            </div>
            <div class="p-5">
              <h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">Metropolis Penthouse A5</h4>
              <p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A stunning, high-rise luxury apartment with panoramic city views and bespoke interior design.</p>
              <p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $3,500,000</p>
              <div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                Added: <span class="ml-1">2023-10-26</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-500 text-yellow-900 border border-yellow-400 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
                <div class="flex space-x-3">
                  <button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                  </button>
                  <button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 2 -->
          <div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
            <div class="relative h-48 overflow-hidden">
              <img src="https://picsum.photos/id/1018/400/250" alt="Rare Stock Portfolio" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Investments</span>
            </div>
            <div class="p-5">
              <h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">Regal Tech Portfolio Q4</h4>
              <p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A curated portfolio of high-growth technology stocks with promising long-term returns.</p>
              <p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $1,200,000</p>
              <div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                Added: <span class="ml-1">2023-09-15</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-500 text-green-900 border border-green-400 dark:bg-green-700 dark:text-green-100">Acquired</span>
                <div class="flex space-x-3">
                  <button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                  </button>
                  <button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 3 -->
          <div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
            <div class="relative h-48 overflow-hidden">
              <img src="https://picsum.photos/id/194/400/250" alt="Education Fund" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Education</span>
            </div>
            <div class="p-5">
              <h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">Oxford Endowment Plan</h4>
              <p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A robust education fund designed for prestigious university tuition and living expenses.</p>
              <p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $500,000</p>
              <div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                Added: <span class="ml-1">2023-08-01</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-500 text-yellow-900 border border-yellow-400 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
                <div class="flex space-x-3">
                  <button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                  </button>
                  <button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Wishlist Item 4 -->
          <div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
            <div class="relative h-48 overflow-hidden">
              <img src="https://picsum.photos/id/188/400/250" alt="Vintage Automobile" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-fuchsia-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Luxury</span>
            </div>
            <div class="p-5">
              <h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">1930s Duesenberg J</h4>
              <p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A meticulously restored classic automobile, a true symbol of automotive luxury and history.</p>
              <p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $2,800,000</p>
              <div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                Added: <span class="ml-1">2023-07-05</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-500 text-green-900 border border-green-400 dark:bg-green-700 dark:text-green-100">Acquired</span>
                <div class="flex space-x-3">
                  <button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                  </button>
                  <button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!-- Summary Section -->
      <section class="bg-gradient-to-tr from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 p-6 rounded-xl shadow-xl mt-8 border border-teal-600 dark:border-teal-800">
        <h3 class="text-2xl font-semibold mb-4 text-gold-300 dark:text-gold-400 border-b pb-2 border-gold-500 dark:border-gold-700">Portfolio Overview</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-center">
          <div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
            <p class="text-gold-200 text-sm">Total Items</p>
            <p class="text-3xl font-bold text-gold-400 dark:text-gold-300">4</p>
          </div>
          <div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
            <p class="text-gold-200 text-sm">Total Value</p>
            <p class="text-xl sm:text-2xl font-bold text-gold-400 dark:text-gold-300">$8.0M</p>
          </div>
          <div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
            <p class="text-gold-200 text-sm">Acquired</p>
            <p class="text-3xl font-bold text-gold-400 dark:text-gold-300">2</p>
          </div>
          <div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
            <p class="text-gold-200 text-sm">Pending</p>
            <p class="text-3xl font-bold text-gold-400 dark:text-gold-300">2</p>
          </div>
        </div>
      </section>

      <!-- User Profile/Avatar -->
      <div class="bg-gradient-to-tl from-emerald-800 to-teal-900 dark:from-teal-900 dark:to-gray-800 p-4 rounded-xl shadow-inner mt-8 flex items-center justify-between border border-emerald-600 dark:border-teal-700">
        <div class="flex items-center space-x-4">
          <img class="w-12 h-12 rounded-full border-2 border-gold-400 dark:border-gold-700 shadow-md" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div>
            <p class="text-lg font-semibold text-gold-300 dark:text-gold-400">Ms. Evelyn Sterling</p>
            <p class="text-sm text-gold-200 dark:text-gray-300">Wealth Manager, Elite Global Bank</p>
          </div>
        </div>
        <button class="text-gold-400 hover:text-gold-300 transform hover:scale-105 transition-transform duration-200">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        </button>
      </div>

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

Retro_Crypto_Password_Reset_Component

Un composant complexe de réinitialisation de mot de passe sur le thème rétro/vintage conçu pour les applications de crypto-monnaie et de blockchain, avec une interaction en plusieurs étapes, une mise en page réactive et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 text-gray-200 p-4 font-mono dark:from-gray-900 dark:via-black dark:to-gray-950">
  <div class="flex items-center justify-center min-h-screen">
    <div class="relative bg-gradient-to-br from-indigo-800 to-purple-800 border-4 border-purple-400 rounded-lg shadow-retro-glow p-8 w-full max-w-lg md:max-w-2xl lg:max-w-3xl transform -rotate-1 skew-x-1 transition-all duration-300 hover:rotate-0 hover:skew-x-0 dark:from-gray-800 dark:to-gray-900 dark:border-purple-600 dark:shadow-retro-glow-dark">
      <div class="absolute -top-4 -left-4 w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-xl font-bold border-2 border-purple-300 transform rotate-12 dark:bg-purple-700 dark:border-purple-500">Ω</div>
      <div class="absolute -bottom-4 -right-4 w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-xl font-bold border-2 border-purple-300 transform -rotate-12 dark:bg-purple-700 dark:border-purple-500">Ξ</div>

      <div class="text-center mb-8">
        <h1 class="text-4xl md:text-5xl font-extrabold text-yellow-300 uppercase leading-tight tracking-wider mb-2 drop-shadow-lg dark:text-yellow-400">
          [CRYPTO] Reset Protocol
        </h1>
        <p class="text-purple-200 text-lg md:text-xl italic">
          Accessing secured memory banks...
        </p>
      </div>

      <div class="relative bg-purple-900/50 p-6 rounded-md border border-purple-700 shadow-inner-glow dark:bg-gray-800/50 dark:border-gray-700">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- Left Panel: Form Steps -->
          <div>
            <h2 class="text-2xl font-bold text-yellow-300 mb-4 dark:text-yellow-400">Authentication Sequence</h2>

            <!-- Step 1: Email/Username -->
            <div class="mb-6" id="step1">
              <label for="identifier" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">User ID / Wallet Alias</label>
              <input type="text" id="identifier" name="identifier" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your encrypted identity">
              <button class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-yellow-600 dark:hover:bg-yellow-700" onclick="document.getElementById('step1').classList.add('hidden'); document.getElementById('step2').classList.remove('hidden');">Initiate Sequence</button>
            </div>

            <!-- Step 2: Verification Code (Hidden by default) -->
            <div class="hidden mb-6" id="step2">
              <label for="verification_code" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">Security Key Receive Protocol</label>
              <input type="text" id="verification_code" name="verification_code" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter Alpha-numeric key">
              <p class="text-xs text-purple-300 mt-1">A 6-digit key has been dispatched to your registered relay point.</p>
              <button class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-yellow-600 dark:hover:bg-yellow-700" onclick="document.getElementById('step2').classList.add('hidden'); document.getElementById('step3').classList.remove('hidden');">Validate Key</button>
            </div>

            <!-- Step 3: New Password (Hidden by default) -->
            <div class="hidden mb-6" id="step3">
              <label for="new_password" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">Input New Encryption Passphrase</label>
              <input type="password" id="new_password" name="new_password" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Min 10 characters, mixed case, symbols">
              <p class="text-xs text-purple-300 mt-1">Ensure high entropy for secure re-initialization.</p>

              <label for="confirm_password" class="block text-purple-200 text-sm font-bold mb-2 mt-4 uppercase tracking-wide">Re-confirm Passphrase</label>
              <input type="password" id="confirm_password" name="confirm_password" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Re-enter for verification">
              <button class="mt-6 bg-green-500 hover:bg-green-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-green-600 dark:hover:bg-green-700">Execute Re-initialization</button>
            </div>
          </div>

          <!-- Right Panel: Status/Info Display -->
          <div class="hidden md:block">
            <h2 class="text-2xl font-bold text-yellow-300 mb-4 dark:text-yellow-400">System Diagnostics</h2>
            <div class="bg-purple-800/70 p-4 rounded-md border border-purple-600 h-full flex flex-col justify-between dark:bg-gray-700/70 dark:border-gray-600">
              <div>
                <p class="text-purple-200 text-sm mb-2">Status: <span class="text-yellow-300 font-semibold">Awaiting Input</span></p>
                <p class="text-purple-200 text-sm mb-2">Session ID: <span class="text-purple-300">0x7a8b9c...</span></p>
                <p class="text-purple-200 text-sm mb-4">Last attempt: <span class="text-purple-300">2024.07.20 14:38 GMT</span></p>
                <hr class="border-purple-600 my-4 dark:border-gray-600">
                <p class="text-purple-200 text-sm italic">For security, all network traffic is encrypted with AES-256. Do NOT share your private keys or backup mnemonics with anyone, ever. Our support will NEVER ask for this information.</p>
              </div>
              <div class="mt-4 text-center">
                <img src="https://picsum.photos/150/100?random=1" alt="Retro abstract data stream" class="mx-auto rounded-md border border-purple-600 shadow-lg">
                <p class="text-xs text-purple-400 mt-2">['DATA_STREAM_VISUALIZER']</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center text-purple-300 text-xs">
        <p>&copy; 2084 [CRYPTO] Corp. All network transmissions monitored.</p>
        <p class="mt-1"><a href="#" class="underline hover:text-yellow-300">Terms of Protocol</a> | <a href="#" class="underline hover:text-yellow-300">Data Security Policy</a></p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Retro glow effect */
  .shadow-retro-glow {
    box-shadow: 
      0 0 5px rgba(255, 255, 255, 0.5),
      0 0 10px rgba(168, 85, 247, 0.7),
      0 0 20px rgba(168, 85, 247, 0.5),
      0 0 30px rgba(168, 85, 247, 0.3);
  }
  .dark .shadow-retro-glow-dark {
    box-shadow: 
      0 0 5px rgba(255, 255, 255, 0.3),
      0 0 10px rgba(192, 132, 252, 0.6),
      0 0 20px rgba(192, 132, 252, 0.4),
      0 0 30px rgba(192, 132, 252, 0.2);
  }
  /* Inner glow for panels */
  .shadow-inner-glow {
    box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.5), inset 0 0 20px rgba(168, 85, 247, 0.2);
  }
  .dark .shadow-inner-glow {
    box-shadow: inset 0 0 8px rgba(192, 132, 252, 0.4), inset 0 0 20px rgba(192, 132, 252, 0.15);
  }

  /* Simple keyframe for subtle animation */
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
  }
  .text-yellow-300 { animation: flicker 3s infinite ease-in-out; }
</style>

Pagination d’entreprise Art Déco

Un composant de pagination sophistiqué inspiré de l’esthétique Art déco, avec des motifs géométriques et une palette de couleurs bleues d’entreprise. Il est réactif, inclut la prise en charge du mode sombre et convient aux sites Web d’entreprise professionnels.

Ouvrir Aperçu

                <nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-gradient-to-r from-blue-900 to-blue-700 dark:from-gray-900 dark:to-gray-800 text-white shadow-lg font-sans rounded-lg border border-blue-600 dark:border-gray-700" aria-label="Pagination">
  <div class="hidden sm:block">
    <p class="text-sm text-blue-200 dark:text-gray-400">
      Showing
      <span class="font-medium">1</span>
      to
      <span class="font-medium">10</span>
      of
      <span class="font-medium">97</span>
      results
    </p>
  </div>
  <div class="flex flex-1 justify-between sm:justify-end">
    <a href="#"
      class="relative inline-flex items-center rounded-l-md border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
      <svg class="h-5 w-5 mr-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd"
          d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-4.25a.75.75 0 010-1.06l3.75-4.25a.75.75 0 011.06 0z"
          clip-rule="evenodd" />
      </svg>
      Previous
    </a>
    <div class="hidden sm:flex rounded-r-md border border-l-0 border-blue-500 dark:border-gray-600">
      <a href="#"
        class="relative inline-flex items-center border border-r-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        1
      </a>
      <a href="#"
        class="relative inline-flex items-center bg-blue-500 dark:bg-gray-600 px-4 py-2 text-sm font-medium text-white dark:text-gray-100 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out border border-blue-500 dark:border-gray-600">
        2
      </a>
      <a href="#"
        class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        3
      </a>
      <span
        class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-200 dark:text-gray-400">
        ...
      </span>
      <a href="#"
        class="relative hidden md:inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        8
      </a>
      <a href="#"
        class="relative inline-flex items-center border border-r-0 border-l-0 border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        9
      </a>
      <a href="#"
        class="relative inline-flex items-center border border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out">
        10
      </a>
    </div>
    <a href="#"
      class="relative inline-flex items-center rounded-r-md border border-l-0 border-r border-blue-500 dark:border-gray-600 bg-blue-700 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 dark:text-gray-300 dark:hover:bg-gray-600 focus:z-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-blue-400 transition-colors duration-200 ease-in-out group">
      Next
      <svg class="h-5 w-5 ml-2 text-blue-200 group-hover:text-blue-100 transition-colors duration-200 dark:text-gray-400 dark:group-hover:text-gray-300" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 4.25a.75.75 0 010 1.06l-3.75 4.25a.75.75 0 01-1.06 0z"
          clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

Composant Profils utilisateur

Il s’agit d’un composant complexe et réactif pour les sites Web d’actualités et de journalisme, doté d’un design inspiré du Bauhaus avec une palette de couleurs vives et sucrées et la prise en charge du mode sombre. Affiche plusieurs profils d’utilisateurs avec des photos de profil, des noms, des titres et le nombre d’abonnés, conçus pour une interface riche.

Ouvrir Aperçu

                <div class="font-sans bg-pink-100 text-purple-900 min-h-screen p-4 sm:p-8 dark:bg-purple-900 dark:text-pink-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto py-8 sm:py-12 lg:py-16">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-8 sm:mb-12 dark:text-pink-300 tracking-tight leading-tight uppercase relative">
      <span class="block">Our Esteemed Contributors</span>
      <span class="block text-2xl sm:text-3xl text-purple-600 dark:text-pink-200 mt-2 font-medium">Meet the Minds Behind the Stories</span>
      <div class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-purple-500 dark:bg-pink-400 mt-4 rounded-full"></div>
    </h1>

    <p class="text-center text-lg sm:text-xl mb-12 sm:mb-16 max-w-3xl mx-auto dark:text-purple-200">
      Discover the talented individuals who bring you the latest news and in-depth analysis. Each profile offers a glimpse into their expertise and contributions.
    </p>

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

      <!-- Profile Card 1 -->
      <article class="relative bg-gradient-to-br from-pink-300 to-red-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-indigo-600 dark:to-blue-800">
        <div class="absolute inset-0 bg-pink-400 opacity-20 dark:bg-blue-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile of Jane Doe">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Jane Doe</h2>
          <p class="text-lg text-pink-900 font-semibold mb-3 dark:text-purple-300">Senior Journalist</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">5.2K Followers</span>
          </div>
          <p class="text-sm text-pink-900 mb-6 line-clamp-3 dark:text-purple-200">Specializing in investigative journalism and political analysis. Jane has been breaking stories for over a decade...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-300 transform hover:scale-105 transition-all duration-200 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 2 -->
      <article class="relative bg-gradient-to-br from-blue-300 to-green-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-pink-600 dark:to-orange-800">
         <div class="absolute inset-0 bg-blue-400 opacity-20 dark:bg-orange-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Profile of John Smith">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">John Smith</h2>
          <p class="text-lg text-blue-900 font-semibold mb-3 dark:text-purple-300">Tech Editor</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">8.1K Followers</span>
          </div>
          <p class="text-sm text-blue-900 mb-6 line-clamp-3 dark:text-purple-200">Covering the latest in gadgets, software, and digital trends. John's insights are always cutting-edge...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-green-600 text-white font-bold rounded-full shadow-lg hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 transform hover:scale-105 transition-all duration-200 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 3 -->
      <article class="relative bg-gradient-to-br from-yellow-300 to-orange-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-green-600 dark:to-teal-800">
         <div class="absolute inset-0 bg-yellow-400 opacity-20 dark:bg-teal-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile of Emily White">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Emily White</h2>
          <p class="text-lg text-orange-900 font-semibold mb-3 dark:text-purple-300">Culture Reporter</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">3.9K Followers</span>
          </div>
          <p class="text-sm text-orange-900 mb-6 line-clamp-3 dark:text-purple-200">Exploring arts, entertainment, and social trends. Emily brings a fresh perspective to cultural discourse...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-orange-600 text-white font-bold rounded-full shadow-lg hover:bg-orange-700 focus:outline-none focus:ring-4 focus:ring-orange-300 transform hover:scale-105 transition-all duration-200 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 4 -->
      <article class="relative bg-gradient-to-br from-purple-300 to-indigo-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-red-600 dark:to-yellow-800">
         <div class="absolute inset-0 bg-purple-400 opacity-20 dark:bg-yellow-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile of David Lee">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">David Lee</h2>
          <p class="text-lg text-indigo-900 font-semibold mb-3 dark:text-purple-300">Sports Analyst</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">6.7K Followers</span>
          </div>
          <p class="text-sm text-indigo-900 mb-6 line-clamp-3 dark:text-purple-200">Providing expert analysis on global sports events. David's predictions are a must-read for any fan...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-bold rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 transform hover:scale-105 transition-all duration-200 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 5 -->
      <article class="relative bg-gradient-to-br from-teal-300 to-cyan-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-purple-600 dark:to-fuchsia-800">
         <div class="absolute inset-0 bg-teal-400 opacity-20 dark:bg-fuchsia-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/72.jpg" alt="Profile of Sarah Chen">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Sarah Chen</h2>
          <p class="text-lg text-cyan-900 font-semibold mb-3 dark:text-purple-300">Economics Correspondent</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">4.5K Followers</span>
          </div>
          <p class="text-sm text-cyan-900 mb-6 line-clamp-3 dark:text-purple-200">Reporting on global market trends and economic policies. Sarah's analysis clarifies complex financial news...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-cyan-600 text-white font-bold rounded-full shadow-lg hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 transform hover:scale-105 transition-all duration-200 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 dark:focus:ring-fuchsia-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 6 -->
      <article class="relative bg-gradient-to-br from-lime-300 to-emerald-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-cyan-600 dark:to-lime-800">
         <div class="absolute inset-0 bg-lime-400 opacity-20 dark:bg-lime-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Profile of Mark Johnson">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Mark Johnson</h2>
          <p class="text-lg text-emerald-900 font-semibold mb-3 dark:text-purple-300">Science Editor</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">7.0K Followers</span>
          </div>
          <p class="text-sm text-emerald-900 mb-6 line-clamp-3 dark:text-purple-200">Breaking down complex scientific discoveries into understandable news. Mark's passion for science is infectious...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-emerald-600 text-white font-bold rounded-full shadow-lg hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-300 transform hover:scale-105 transition-all duration-200 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
            View Profile
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

    </div>

     <div class="flex justify-center mt-12 sm:mt-16">
        <button class="px-8 py-4 bg-purple-600 text-white text-xl font-bold rounded-full shadow-lg hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 transition-all duration-300 transform hover:scale-105 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-400">
            Load More Contributors
        </button>
    </div>
  </div>
</div>

Industrial_Monochromatic_Tabs_Component_Booking_Reservation

Un composant d’onglets simple et réactif à l’esthétique industrielle et monochrome, conçu pour les systèmes de réservation et de réservation. Il prend en charge le mode sombre et utilise des matériaux bruts et des éléments exposés pour un attrait utilitaire.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
      <input type="radio" name="tab" id="tab1" class="hidden" checked>
      <label for="tab1" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        Appointment
      </label>
      <input type="radio" name="tab" id="tab2" class="hidden">
      <label for="tab2" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        Reservation
      </label>
      <input type="radio" name="tab" id="tab3" class="hidden">
      <label for="tab3" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        History
      </label>
    </div>

    <div class="p-6 sm:p-8">
      <!-- Tab Content 1: Appointment -->
      <div id="content1" class="tab-content" data-tab="tab1">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Schedule Your Appointment</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Please select a service, date, and time for your appointment. Our team will confirm your booking within 24 hours.</p>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="service" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Service Type</label>
            <select id="service" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
              <option value="">Select a Service</option>
              <option value="consultation">Technical Consultation</option>
              <option value="maintenance">Equipment Maintenance</option>
              <option value="installation">New System Installation</option>
              <option value="repair">Emergency Repair</option>
            </select>
          </div>
          <div>
            <label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Date</label>
            <input type="date" id="date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Time Slot</label>
            <input type="time" id="time" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Additional Notes (Optional)</label>
            <textarea id="notes" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
          </div>
        </div>
        <button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Book Appointment</button>
      </div>

      <!-- Tab Content 2: Reservation -->
      <div id="content2" class="tab-content hidden" data-tab="tab2">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Make a Resource Reservation</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Reserve our specialized equipment or facilities. Provide details about your project to ensure availability and suitability.</p>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="resource" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Resource Type</label>
            <select id="resource" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
              <option value="">Select a Resource</option>
              <option value="lab">Testing Lab Area</option>
              <option value="equipment">Heavy Lifting Equipment</option>
              <option value="conference">Conference Room 1</option>
              <option value="workshop">Large Workshop Space</option>
            </select>
          </div>
          <div>
            <label for="start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Date</label>
            <input type="date" id="start-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="end-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date</label>
            <input type="date" id="end-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="project-details" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Details</label>
            <textarea id="project-details" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
          </div>
        </div>
        <button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Submit Reservation</button>
      </div>

      <!-- Tab Content 3: History -->
      <div id="content3" class="tab-content hidden" data-tab="tab3">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Your Booking History</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Review your past appointments and reservations. You can also cancel or reschedule upcoming bookings here.</p>
        
        <div class="space-y-4">
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Equipment Maintenance</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-10-26, Time: 10:00 AM</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400 font-medium">Confirmed</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
              <button class="px-4 py-2 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Cancel</button>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Testing Lab Area Reservation</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">From: 2023-10-20 to 2023-10-22</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-blue-600 dark:text-blue-400 font-medium">Completed</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Emergency Repair Service</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-09-15, Time: 02:30 PM</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-red-600 dark:text-red-400 font-medium">Cancelled</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is a workaround for pure HTML/CSS tab functionality using radio buttons */
  /* In a real application, JavaScript would be used for better accessibility and dynamic content */
  .tab-content {
    display: none;
  }
  
  #tab1:checked ~ .flex + .p-6 #content1,
  #tab2:checked ~ .flex + .p-6 #content2,
  #tab3:checked ~ .flex + .p-6 #content3 {
    display: block;
  }

  /* Styles for the labels to act as interactive tabs */
  #tab1:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important; /* gray-200 */
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important; /* gray-900 */
    color: var(--checked-text-color-light, #1f2937) !important; /* gray-900 */
  }
  .dark #tab1:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important; /* gray-900 */
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important; /* gray-100 */
    color: var(--checked-text-color-dark, #f9fafb) !important; /* white */
  }

  #tab2:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important;
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
    color: var(--checked-text-color-light, #1f2937) !important;
  }
  .dark #tab2:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important;
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
    color: var(--checked-text-color-dark, #f9fafb) !important;
  }

  #tab3:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important;
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
    color: var(--checked-text-color-light, #1f2937) !important;
  }
  .dark #tab3:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important;
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
    color: var(--checked-text-color-dark, #f9fafb) !important;
  }
</style>

Retro_Candy_CAPTCHA_Component

Un composant CAPTCHA complexe, de style rétro/vintage avec une palette de couleurs bonbon/sucré, conçu pour les systèmes de réservation et de réservation. Dispose de plusieurs éléments interactifs, d’une mise en page entièrement réactive et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-900 via-pink-900 to-indigo-900 flex items-center justify-center font-mono">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl border-4 border-pink-400 dark:border-pink-600 overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="h-24 bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 flex items-center justify-center relative">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-white uppercase tracking-wider drop-shadow-lg text-center relative z-10">
        <span class="block transform -rotate-6 scale-90">Verifying Identity</span>
      </h2>
      <div class="absolute inset-0 flex items-center justify-center transform -rotate-12 bounce-slow">
        <div class="w-16 h-16 bg-pink-300 dark:bg-pink-500 rounded-full opacity-30"></div>
        <div class="w-12 h-12 bg-purple-300 dark:bg-purple-500 rounded-full opacity-30 ml-8"></div>
      </div>
    </div>

    <div class="p-6 sm:p-8">
      <p class="text-center text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 font-semibold leading-relaxed">
        To book your sweet slot, please complete the CAPTCHA.
      </p>

      <div class="space-y-6">
        <!-- Image Selection CAPTCHA -->
        <div class="bg-pink-100 dark:bg-pink-900 p-4 rounded-xl border border-pink-300 dark:border-pink-700 shadow-inner animation-pulse-light">
          <h3 class="text-lg sm:text-xl font-bold text-pink-700 dark:text-pink-300 mb-4">Select all squares with <span class="text-purple-600 dark:text-purple-400">Cupcakes</span></h3>
          <div class="grid grid-cols-3 gap-2">
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1053/300/300" alt="Image 1" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/108/300/300" alt="Image 2" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1041/300/300" alt="Image 3" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1025/300/300" alt="Image 4" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/103/300/300" alt="Image 5" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1069/300/300" alt="Image 6" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
          </div>
        </div>

        <!-- Audio CAPTCHA (simplified for HTML only) -->
        <div class="bg-purple-100 dark:bg-purple-900 p-4 rounded-xl border border-purple-300 dark:border-purple-700 shadow-inner">
          <h3 class="text-lg sm:text-xl font-bold text-purple-700 dark:text-purple-300 mb-4">Listen and type the numbers you hear:</h3>
          <div class="flex flex-col sm:flex-row items-center gap-4">
            <button class="flex-shrink-0 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500">
              <i class="fas fa-play mr-2"></i> Play Audio
            </button>
            <input type="text" placeholder="Enter numbers here" class="flex-grow w-full sm:w-auto p-3 rounded-full border-2 border-purple-300 dark:border-purple-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500 shadow-sm">
          </div>
        </div>

        <!-- Drag & Drop / Slider CAPTCHA (simplified for HTML only) -->
        <div class="bg-mint-100 dark:bg-green-900 p-4 rounded-xl border border-mint-300 dark:border-green-700 shadow-inner">
          <h3 class="text-lg sm:text-xl font-bold text-mint-700 dark:text-green-300 mb-4">Drag the <span class="text-purple-600 dark:text-purple-400">Candy</span> into the frame:</h3>
          <div class="flex justify-center items-center gap-4">
            <div class="w-24 h-24 sm:w-32 sm:h-32 bg-white dark:bg-gray-700 rounded-lg border-4 border-dashed border-mint-400 dark:border-green-600 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm overflow-hidden relative">
              <img src="https://picsum.photos/id/214/100/100" class="absolute inset-0 object-cover opacity-30 blur-sm" />
              <span class="relative z-10">Drop Zone</span>
            </div>
            <div class="w-20 h-20 sm:w-24 sm:h-24 bg-pink-300 dark:bg-pink-700 rounded-full flex items-center justify-center text-white text-3xl shadow-md cursor-grab transform transition-transform duration-200 hover:scale-110">
              🍬
            </div>
          </div>
        </div>

        <!-- ReCAPTCHA-like checkbox -->
        <div class="flex items-center justify-center bg-gray-50 dark:bg-gray-700 p-4 rounded-xl border border-gray-200 dark:border-gray-600 shadow-inner">
          <label for="iamnotarobot" class="flex items-center cursor-pointer">
            <input type="checkbox" id="iamnotarobot" name="iamnotarobot" class="form-checkbox h-7 w-7 text-green-500 rounded-md border-2 border-gray-400 dark:border-gray-500 focus:ring-green-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200">
            <span class="ml-3 text-lg sm:text-xl text-gray-700 dark:text-gray-300 font-semibold">I'm not a robot!</span>
          </label>
        </div>

        <button type="submit" class="w-full py-4 bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 text-white text-2xl font-extrabold uppercase rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 hover:from-pink-600 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-500 disco-shadow">
          Confirm Reservation
        </button>
      </div>
    </div>

    <div class="p-4 sm:p-6 bg-pink-200 dark:bg-pink-900 border-t-4 border-pink-400 dark:border-pink-600 flex justify-center items-center text-sm text-pink-700 dark:text-pink-300">
      <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Captcha Mascot" class="w-10 h-10 rounded-full mr-3 border-2 border-pink-500 dark:border-pink-700 shadow-md">
      <p>Powered by SweetGuard™ &copy; 2023</p>
    </div>
  </div>
</div>

<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0) rotate(-12deg); }
    50% { transform: translateY(-5px) rotate(-12deg); }
  }

  .bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
  }

  @keyframes pulse-light {
    0%, 100% { box-shadow: 0 0 0px rgba(255, 192, 203, 0.4); }
    50% { box-shadow: 0 0 10px rgba(255, 192, 203, 0.8); }
  }

  .animation-pulse-light {
    animation: pulse-light 2s infinite alternate;
  }

  .dark .animation-pulse-light {
    animation: none; /* Disable light pulse in dark mode for better visibility */
  }

  .disco-shadow {
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.7), 0 0 30px rgba(138, 43, 226, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .disco-shadow:hover {
    box-shadow: 0 0 25px rgba(255, 105, 180, 1), 0 0 50px rgba(138, 43, 226, 0.8);
  }

  /* Custom colors for better specificity and semantics */
  .bg-mint-100 { background-color: #e0fdf5; /* Light mint */ }
  .dark\:bg-green-900 { background-color: #0d362d; /* Darker green for dark mode */ }
  .border-mint-300 { border-color: #92e0c1; /* Medium mint */ }
  .dark\:border-green-700 { border-color: #1a624d; /* Dark green for dark mode */ }
  .text-mint-700 { color: #218360; /* Dark mint */ }
  .dark\:text-green-300 { color: #81e2b5; /* Light green for dark mode */ }
</style>

Composant Boutons de partage social

Un composant simple et réactif de boutons de partage social avec une esthétique inspirée du design de Memphis utilisant des couleurs neutres et froides, adapté aux outils CRM/professionnels. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-900 font-sans min-h-screen flex items-center justify-center">
  <div class="max-w-md w-full p-4 sm:p-6 md:p-8 rounded-lg shadow-lg relative overflow-hidden
              bg-gradient-to-br from-gray-100 to-white dark:from-gray-800 dark:to-gray-950
              border border-gray-200 dark:border-gray-700">

    <!-- Memphis Design Elements (Geometric shapes) -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-blue-200 dark:bg-blue-800 transform rotate-45 rounded-lg opacity-70"></div>
    <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-gray-300 dark:bg-gray-700 transform skew-x-12 opacity-60"></div>
    <div class="absolute top-1/4 left-1/4 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full opacity-50"></div>

    <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-6 relative z-10 text-center">
      Share This Content
    </h3>

    <div class="flex flex-wrap gap-3 sm:gap-4 justify-center relative z-10">

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
         aria-label="Share on Facebook">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" 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.776-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.33V22c4.781-.75 8.438-4.887 8.438-9.878Z" clip-rule="evenodd" />
        </svg>
      </a>

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-400 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-75"
         aria-label="Share on Twitter">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-1.04-.614-2.185-1.002-3.425-1.229a4.958 4.958 0 00-8.467 4.549 14.025 14.025 0 01-10.139-5.127 4.958 4.958 0 001.523 6.696c-.965-.034-1.871-.295-2.673-.737v.063a4.958 4.958 0 003.945 4.862 4.995 4.995 0 01-2.22-.088 4.93 4.93 0 004.604 3.447 9.956 9.956 0 01-6.102 2.105c-.39-.023-.777-.048-1.164-.079A13.95 13.95 0 0014 20.443c6.367 0 9.33-5.227 9.33-9.743 0-.15-.003-.298-.009-.446A16.974 16.974 0 0024 4.57z">
          </path>
        </svg>
      </a>

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
         aria-label="Share on Pinterest">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12 2C6.478 2 2 6.478 2 12s4.478 10 10 10c5.236 0 9.53-4.043 9.933-9.183.042-.5-.192-.937-.64-.997s-.887.182-1.383.568c-1.082.827-2.347 1.488-3.79 1.488-2.617 0-4.733-2.115-4.733-4.73C7.437 6.478 9.92 4 12 4c2.204 0 3.993 1.637 4.542 3.82.046.192.203.255.45.187.247-.068.397-.245.474-.473.55-1.633.374-3.568-1.002-4.998C15.42 2.628 13.785 2 12 2ZM8.736 10.963c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-1.895 4.07c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm5.626-2.222c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-1.787 4.148c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-2.738-2.58c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Z" clip-rule="evenodd" />
        </svg>
      </a>

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-gray-700 hover:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-600 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75"
         aria-label="Share via Email">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M1.5 8.67a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 8.67v7.66A2.25 2.25 0 0120.25 18.5H3.75A2.25 2.25 0 011.5 16.33v-7.66zM1.5 9.75v-.88A2.25 2.25 0 013.75 6H20.25A2.25 2.25 0 0122.5 8.87v.88H1.5z" />
          <path d="M22.5 9.75c0-.44-.36-.75-.75-.75H2.25c-.39 0-.75.31-.75.75v.75l10.5 5.5s10.5-5.5 10.5-5.5V9.75z" />
        </svg>
      </a>

    </div>

  </div>
</div>

Composant Suivre le bouton

Il s’agit d’un composant de bouton de suivi complexe, inspiré du papier/de l’impression, pour les sites Web de jeux, doté d’un design monochrome en noir et blanc avec une couleur d’accent vive, optimisé pour la réactivité et le mode sombre.

Ouvrir Aperçu

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center">
  <div class="relative bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 border-4 border-gray-200 dark:border-gray-700 max-w-sm w-full transform rotate-1 transition-all duration-300 hover:rotate-0">
    <!-- Paper Fold Top Left -->
    <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-gray-300 to-gray-50 dark:from-gray-700 dark:to-gray-800 rounded-bl-lg border-b border-r border-gray-200 dark:border-gray-700 -translate-x-1/2 -translate-y-1/2 rotate-45 transform origin-bottom-right"></div>
    <!-- Paper Fold Bottom Right -->
    <div class="absolute bottom-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-tl from-gray-300 to-gray-50 dark:from-gray-700 dark:to-gray-800 rounded-tr-lg border-t border-l border-gray-200 dark:border-gray-700 translate-x-1/2 translate-y-1/2 -rotate-45 transform origin-top-left"></div>

    <div class="text-center mb-6">
      <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="Gamer Avatar" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-lime-500 dark:border-lime-400 mx-auto mb-4 object-cover shadow-md transform -rotate-2">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 relative inline-block before:block before:absolute before:-inset-1 before:bg-gradient-to-r before:from-lime-500 before:to-yellow-400 before:skew-y-3 before:rounded-sm z-0">
        <span class="relative text-white dark:text-gray-900">CyberNinja_XP</span>
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium">Pro Gamer | Streamer | Level 99</p>
    </div>

    <div class="flex justify-around items-center mb-6 border-t border-b border-dashed border-gray-300 dark:border-gray-600 py-3">
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">1.2M</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Followers</p>
      </div>
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">500</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Following</p>
      </div>
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">12,345</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Subscribers</p>
      </div>
    </div>

    <div class="flex flex-col space-y-3">
      <button class="w-full py-3 px-4 rounded-lg bg-lime-500 text-white dark:bg-lime-600 dark:text-gray-900 font-bold text-lg uppercase tracking-wider shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 active:scale-95 active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-700 border-b-4 border-lime-700 dark:border-lime-900 relative group overflow-hidden">
        <span class="absolute inset-0 bg-white/20 dark:bg-black/20 transform -skew-x-12 opacity-0 group-hover:opacity-100 transition-all duration-300"></span>
        <span class="relative z-10">Follow Now</span>
      </button>
      <button class="w-full py-3 px-4 rounded-lg bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 font-semibold text-base uppercase tracking-wide hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border-b-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">
        View Profile
      </button>
    </div>

    <div class="mt-6 text-xs text-gray-400 dark:text-gray-500 text-center uppercase tracking-wider relative">
      <span class="absolute left-0 right-0 top-1/2 h-px bg-gray-300 dark:bg-gray-600 transform -translate-y-1/2"></span>
      <span class="relative z-10 bg-white dark:bg-gray-800 px-2 rotate-1">Player ID: #G4M3R_PR0</span>
    </div>
  </div>
</div>

1 ... 79 80 81 82 83 ... 335

Rechercher des composants

Catégories

Tous les composants