Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Volet Forum communautaire - Art déco Monochromatique

Un composant de forum communautaire réactif conçu avec une esthétique Art déco utilisant une palette de couleurs monochromatiques, adapté aux applications technologiques/SaaS. Dispose d’une prise en charge du mode sombre et d’éléments interactifs.

Ouvrir Aperçu

                <div class="font-sans bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-colors duration-300 p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              " style="box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05), 0 0 0 10px rgba(173,216,230, 0.1) inset;"
  >
    <div class="p-6 sm:p-8 lg:p-10 border-b border-gray-200 dark:border-gray-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 via-blue-500/10 to-blue-300/20 dark:from-blue-700/20 dark:via-blue-900/10 dark:to-blue-700/20 opacity-70" style="clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);"></div>
      <div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-200 leading-tight mb-4 sm:mb-0">
          The Developer Hub
        </h2>
        <button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white rounded-lg shadow-md transition-all duration-300
                       flex items-center space-x-2 border-2 border-blue-600 dark:border-blue-500
                       transform hover:scale-105 active:scale-95
                       relative overflow-hidden group">
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
          <span>New Topic</span>
        </button>
      </div>
      <p class="mt-4 text-base sm:text-lg text-gray-600 dark:text-gray-400 relative z-10">
        Connect, share insights, and get support from our vibrant community of developers.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-0 border-t border-gray-200 dark:border-gray-700">
      <!-- Left Sidebar (Categories/Filters) -->
      <div class="md:col-span-1 p-6 sm:p-8 lg:p-10 border-r border-gray-200 dark:border-gray-700 md:h-full">
        <h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6">
          Categories
        </h3>
        <nav class="space-y-3">
          <a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
            <svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            <span class="font-medium">General Discussion</span>
          </a>
          <a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
            <svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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.75 17L9 20l-1 1h8l-1-1-1.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
            <span class="font-medium">Feature Requests</span>
          </a>
          <a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
            <svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="font-medium">Bug Reports</span>
          </a>
          <a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
            <svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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 20l4-16m4 4l4 4-4 4M6 16L2 12l4-4"></path></svg>
            <span class="font-medium">Technical Discussions</span>
          </a>
        </nav>
      </div>

      <!-- Main Content (Topic List) -->
      <div class="md:col-span-2 p-6 sm:p-8 lg:p-10">
        <h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6">
          Recent Topics
        </h3>

        <div class="space-y-4">
          <!-- Topic Item 1 -->
          <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
                      border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
            <div class="flex-shrink-0">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            </div>
            <div class="flex-grow">
              <a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
                Best Practices for Scalable Microservices Architecture
              </a>
              <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
                <span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">Alex Johnson</a> on October 26, 2023
              </p>
            </div>
            <div class="flex-shrink-0 text-right md:text-left">
              <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                  24
                </span>
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                  1.2K
                </span>
              </div>
            </div>
          </div>

          <!-- Topic Item 2 -->
          <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
                      border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
            <div class="flex-shrink-0">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            </div>
            <div class="flex-grow">
              <a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
                Understanding new CSS features in Modern Browsers
              </a>
              <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
                <span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">Sarah Lee</a> on October 25, 2023
              </p>
            </div>
            <div class="flex-shrink-0 text-right md:text-left">
              <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                  18
                </span>
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                  870
                </span>
              </div>
            </div>
          </div>

          <!-- Topic Item 3 -->
          <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
                      border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
            <div class="flex-shrink-0">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            </div>
            <div class="flex-grow">
              <a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
                Debugging common React performance bottlenecks
              </a>
              <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
                <span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">David Kim</a> on October 24, 2023
              </p>
            </div>
            <div class="flex-shrink-0 text-right md:text-left">
              <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                  31
                </span>
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                  1.5K
                </span>
              </div>
            </div>
          </div>

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

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

Composant Composants multimédias

Un composant multimédia complexe et réactif conçu pour les interfaces finance/banque, avec une palette de couleurs Ocean/Blue et une prise en charge native du mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gradient-to-br dark:from-gray-900 dark:to-blue-950 dark:border dark:border-blue-800 rounded-xl shadow-lg overflow-hidden md:flex md:flex-row-reverse">

    <!-- Right Section: Main Content / Details -->
    <div class="p-6 md:w-2/3 lg:w-3/4 flex flex-col justify-between">
      <div>
        <div class="flex items-center justify-between mb-4">
          <span class="text-xs font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Market Update</span>
          <div class="flex items-center space-x-2">
            <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
              <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"></path></svg>
            </button>
            <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
              <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 11a1 1 0 011-1h3a1 1 0 110 2H8a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4 15a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>

        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight">
          Navigating Volatility: Key Insights for Q3 Investment
        </h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
          Our latest analysis delves into the market trends and economic indicators shaping the investment landscape for the third quarter. Understand the potential risks and opportunities.
        </p>

        <div class="flex items-center space-x-3 mb-6">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Dr. Evelyn Reed</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Chief Economist, Global Wealth Bank</p>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
        <button class="flex-1 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Read Full Report
        </button>
        <button class="flex-1 border border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 font-bold py-3 px-6 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Watch Video Summary
        </button>
      </div>
    </div>

    <!-- Left Section: Image / Media -->
    <div class="md:w-1/3 lg:w-1/4 relative overflow-hidden">
      <img class="w-full h-48 md:h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1020/800/1200" alt="Financial Data Graphics">
      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent dark:from-blue-900/80 dark:via-blue-900/40 dark:to-transparent flex items-end justify-start p-6">
        <div class="bg-blue-800/80 dark:bg-blue-700/80 text-white text-xs font-semibold px-3 py-1 rounded-full backdrop-blur-sm">
          Video Available
        </div>
      </div>
    </div>

  </div>

  <!-- Related Content / Footer (Optional, for context) -->
  <div class="mt-8 max-w-7xl mx-auto text-center text-gray-500 dark:text-gray-400 text-sm">
    <p>Powered by Advanced Financial Analytics. &copy; 2023 Global Wealth Bank.</p>
  </div>

</div>

Corporate_Banking_Login_Form

Un formulaire de connexion minimaliste et plat adapté aux applications financières et bancaires d’entreprise, avec des tons bleus professionnels, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-md">
    <div class="md:flex">
      <div class="w-full p-8">
        <div class="text-center mb-8">
          <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-400 mb-2">Welcome Back</h2>
          <p class="text-gray-600 dark:text-gray-400">Sign in to your account</p>
        </div>

        <form class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
            <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
            <input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
              <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150 ease-in-out">
              Sign in
            </button>
          </div>
        </form>

        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign up</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

Composant du formulaire de paiement

Un composant de formulaire de paiement propre, minimaliste et réactif avec une influence de la typographie suisse/internationale, une palette de couleurs sourdes et une prise en charge du mode sombre, adapté aux interfaces financières et bancaires.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-800 transition-colors duration-300">
    <div class="p-6 md:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 tracking-tight leading-tight mb-2">
        <span class="text-blue-600 dark:text-blue-400">Secure</span> Checkout
      </h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm md:text-base">Please fill in your details to complete your secure transaction.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 md:p-8">
      <div class="lg:col-span-2 space-y-6">
        <!-- Contact Information -->
        <section>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
              <input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
              <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
          </div>
        </section>

        <!-- Shipping Address -->
        <section>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Address</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
            <div>
              <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
              <input type="text" id="first-name" name="first-name" placeholder="John" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
              <input type="text" id="last-name" name="last-name" placeholder="Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
          </div>
          <div class="mb-4">
            <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
            <input type="text" id="address" name="address" placeholder="123 Main St" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
              <input type="text" id="city" name="city" placeholder="Springfield" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State / Province</label>
              <input type="text" id="state" name="state" placeholder="IL" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postcode</label>
              <input type="text" id="zip" name="zip" placeholder="62704" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
          </div>
        </section>

        <!-- Payment Information -->
        <section>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
          <div class="mb-4">
            <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Card Number</label>
            <input type="text" id="card-number" name="card-number" placeholder="XXXX XXXX XXXX XXXX" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="expiration" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Expiration Date</label>
              <input type="text" id="expiration" name="expiration" placeholder="MM/YY" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div>
              <label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">CVC</label>
              <input type="text" id="cvc" name="cvc" placeholder="CVC" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
            <div class="sm:col-span-1">
              <label for="card-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name on Card</label>
              <input type="text" id="card-name" name="card-name" placeholder="John Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
            </div>
          </div>
        </section>
      </div>

      <!-- Order Summary / Cart Details -->
      <aside class="lg:col-span-1 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 p-6 pt-8 lg:p-6 lg:pt-0">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Order Summary</h3>
        <div class="space-y-4">
          <div class="flex justify-between items-center">
            <div class="flex items-center space-x-3">
              <img src="https://picsum.photos/seed/product1/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
              <div>
                <p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Premium Finance Course</p>
                <p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
              </div>
            </div>
            <span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$199.00</span>
          </div>
          <div class="flex justify-between items-center">
            <div class="flex items-center space-x-3">
              <img src="https://picsum.photos/seed/product2/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
              <div>
                <p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Financial Planning Toolkit</p>
                <p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
              </div>
            </div>
            <span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$49.00</span>
          </div>
        </div>

        <div class="mt-6 space-y-2 border-t border-gray-200 dark:border-gray-700 pt-6">
          <div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
            <span>Subtotal</span>
            <span>$248.00</span>
          </div>
          <div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
            <span>Tax (8%)</span>
            <span>$19.84</span>
          </div>
          <div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
            <span>Shipping</span>
            <span>Free</span>
          </div>
          <div class="flex justify-between font-bold text-lg text-gray-800 dark:text-gray-100 pt-2">
            <span>Total</span>
            <span>$267.84</span>
          </div>
        </div>

        <button type="submit" class="mt-8 w-full bg-blue-600 text-white py-3 px-4 rounded-md font-semibold text-base shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          Complete Purchase
        </button>

        <p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
          Your information is secured with <span class="font-medium text-green-600 dark:text-green-400">256-bit encryption</span>.
        </p>
      </aside>
    </div>
  </div>
</div>

Composant Filtres

Il s’agit d’un composant de filtres complexe et réactif avec un style de conception « Palette forêt/vert » et « Transitions dégradées/couleurs », adapté à un portefeuille. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-green-950 min-h-screen font-sans text-gray-800 dark:text-gray-200 transition-colors duration-500">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden p-6 sm:p-10 border border-green-200 dark:border-green-700 transition-all duration-500">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-green-800 dark:from-emerald-400 dark:to-green-600 mb-8 sm:mb-10 text-center">
      Browse Our Portfolio
    </h2>

    <!-- Filter Controls Section -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-10">

      <!-- Category Filter -->
      <div class="relative group">
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Category</label>
        <select id="category" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
          bg-no-repeat bg-right-center pr-10 cursor-pointer
          bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] ">
          <option value="all" class="text-gray-700 dark:text-gray-300">All Categories</option>
          <option value="web-design" class="text-gray-700 dark:text-gray-300">Web Design</option>
          <option value="branding" class="text-gray-700 dark:text-gray-300">Branding</option>
          <option value="marketing" class="text-gray-700 dark:text-gray-300">Marketing</option>
          <option value="photography" class="text-gray-700 dark:text-gray-300">Photography</option>
        </select>
        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
          <svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Sort By Filter -->
      <div class="relative group">
        <label for="sortby" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Sort By</label>
        <select id="sortby" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
          bg-no-repeat bg-right-center pr-10 cursor-pointer
          bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] ">
          <option value="newest" class="text-gray-700 dark:text-gray-300">Newest</option>
          <option value="oldest" class="text-gray-700 dark:text-gray-300">Oldest</option>
          <option value="popular" class="text-gray-700 dark:text-gray-300">Most Popular</option>
        </select>
        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
          <svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Search Input -->
      <div class="relative col-span-full md:col-span-1 lg:col-span-2

Skeuomorphic Retour en haut du bouton

Un bouton skeuomorphe « Retour en haut » conçu avec des neutres chauds pour les sites Web d’entreprise, avec un design réactif et une prise en charge du mode sombre. Le bouton a un effet de pression 3D.

Ouvrir Aperçu

                <div class="fixed bottom-8 right-8 z-50">
  <!-- Back to Top Button Wrapper -->
  <button
    onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"
    class="group relative flex h-16 w-16 items-center justify-center rounded-full
           bg-gradient-to-br from-stone-100 to-stone-300 shadow-lg
           hover:from-stone-200 hover:to-stone-400
           dark:from-stone-700 dark:to-stone-900
           dark:hover:from-stone-600 dark:hover:to-stone-800
           transition-all duration-300 ease-in-out
           focus:outline-none focus:ring-4 focus:ring-stone-400 focus:ring-opacity-75
           dark:focus:ring-stone-600"
    aria-label="Back to top"
  >
    <!-- Inner Button 'Pressed' Effect -->
    <span class="absolute inset-1 rounded-full
                 bg-gradient-to-br from-stone-50 to-stone-200
                 dark:from-stone-800 dark:to-stone-950
                 group-hover:from-stone-100 group-hover:to-stone-300
                 dark:group-hover:from-stone-700 dark:group-hover:to-stone-900
                 transition-all duration-300 ease-in-out
                 shadow-inner group-active:shadow-none group-active:inset-2">
    </span>

    <!-- Arrow Icon -->
    <svg
      class="relative h-8 w-8 text-stone-600 group-hover:text-stone-700 dark:text-stone-300 dark:group-hover:text-stone-100 transition-colors duration-300 ease-in-out"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-width="2"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M5 10l7-7m0 0l7 7m-7-7v18"
      />
    </svg>

    <!-- 'Hover Light' Effect (Top-left highlight) -->
    <div class="absolute inset-0 rounded-full opacity-0
                bg-gradient-to-br from-white/70 to-transparent
                dark:from-white/10 dark:to-transparent
                group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>

    <!-- 'Shadow Relief' Effect (Bottom-right shadow) -->
    <div class="absolute inset-0 rounded-full opacity-0
                bg-gradient-to-tl from-black/20 to-transparent
                dark:from-black/40 dark:to-transparent
                group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
  </button>
</div>

<!-- To make the 'Back to Top' button visible and testable, add some scrollable content -->
<div class="h-screen w-full bg-stone-50 dark:bg-stone-900 flex items-center justify-center text-4xl text-stone-700 dark:text-stone-200 font-bold">
  Scroll Down
</div>
<div class="h-screen w-full bg-stone-100 dark:bg-stone-800 flex items-center justify-center text-4xl text-stone-700 dark:text-stone-200 font-bold">
  More Content
</div>
<div class="h-screen w-full bg-stone-200 dark:bg-stone-700 flex items-center justify-center text-4xl text-stone-700 dark:text-stone-200 font-bold">
  Keep Scrolling
</div>
<div class="h-screen w-full bg-stone-300 dark:bg-stone-600 flex items-center justify-center text-4xl text-stone-700 dark:text-stone-200 font-bold">
  End of Page
</div>

Composant Captcha minimaliste

Un composant CAPTCHA simple, réactif et minimaliste conçu pour les tableaux de bord, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-lg shadow-md bg-white dark:bg-gray-800 p-6 sm:p-8 border border-gray-200 dark:border-gray-700">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-100 mb-6">
      Are you human?
    </h2>

    <div class="flex flex-col items-center gap-4 mb-6">
      <div class="w-full h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden flex items-center justify-center p-2">
        <img src="https://picsum.photos/250/80?random=1" alt="Captcha image" class="w-full h-full object-cover rounded-sm border border-gray-300 dark:border-gray-600">
      </div>
      <button type="button" class="flex items-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md py-1 px-2">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 11m7 11v-5h.582m-15.356-2A8.001 8.001 0 0120 13l-2.199-1.857L20 13c-.161 4.545-3.535 8-7.794 8A7.962 7.962 0 014 12.01

Composant de navigation minimaliste Earth Tones

Un composant de navigation minimaliste et plat avec une palette de couleurs terre, adapté aux sites Web de conseil/services. Il comprend une conception réactive pour les ordinateurs de bureau, les tablettes et les mobiles, et prend en charge le mode sombre.

Ouvrir Aperçu

                <nav class="bg-stone-100 dark:bg-stone-900 shadow-sm transition-colors duration-300 w-full">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-stone-800 dark:text-stone-200 text-2xl font-bold tracking-tight">
      ConsultPro
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button type="button" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none focus:ring-2 focus:ring-stone-500" aria-label="Toggle navigation">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">
        Services
      </a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">
        About Us
      </a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">
        Case Studies
      </a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">
        Blog
      </a>
      <a href="#" class="bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white px-5 py-2 rounded-full text-base font-medium transition-colors duration-200 shadow-md">
        Contact Us
      </a>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, can be toggled with JS) -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-800 transition-colors duration-200">
        Services
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-800 transition-colors duration-200">
        About Us
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-800 transition-colors duration-200">
        Case Studies
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-800 transition-colors duration-200">
        Blog
      </a>
      <a href="#" class="block mt-2 px-3 py-2 rounded-full text-base font-medium text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 shadow-md transition-colors duration-200 text-center">
        Contact Us
      </a>
    </div>
  </div>
</nav>

Dashboard_Event_Conference

Un tableau de bord complexe, sur le thème du monospace/développeur, pour la gestion d’événements et de conférences, avec une palette de couleurs bonbon/sucré et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-['JetBrains_Mono',_monospace] min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 p-4 sm:p-8">

  <!-- Not strictly monospace, but 'JetBrains Mono' is a good developer font -->
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

  <style>
    /* Custom scrollbar for webkit browsers */
    .scrollbar-webkit::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .scrollbar-webkit::-webkit-scrollbar-track {
      background: transparent;
    }

    .scrollbar-webkit::-webkit-scrollbar-thumb {
      background: #fbcfe8; /* pink-200 */
      border-radius: 4px;
    }

    .dark .scrollbar-webkit::-webkit-scrollbar-thumb {
      background: #a78bfa; /* violet-400 */
    }

    .scrollbar-webkit::-webkit-scrollbar-thumb:hover {
      background: #f472b6; /* pink-400 */
    }

    .dark .scrollbar-webkit::-webkit-scrollbar-thumb:hover {
      background: #8b5cf6; /* violet-500 */
    }
  </style>

  <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
    <h1 class="text-4xl font-bold mb-4 sm:mb-0 text-fuchsia-600 dark:text-fuchsia-400"><span class="text-pink-500 block sm:inline">[</span> Event OS <span class="text-pink-500 block sm:inline">]</span></h1>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search commands..." class="py-2 pl-4 pr-10 text-sm rounded-md bg-pink-200 dark:bg-purple-800 border border-fuchsia-300 dark:border-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent transition-all duration-200 placeholder:text-pink-800 dark:placeholder:text-purple-300 text-pink-900 dark:text-purple-100">
        <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-fuchsia-700 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <button aria-label="User profile" class="p-1 rounded-full bg-pink-300 dark:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400">
        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-purple-400">
      </button>
    </div>
  </header>

  <main class="grid grid-cols-1 lg:grid-cols-3 gap-6 auto-rows-min">

    <!-- Main Stats Terminal -->
    <section class="lg:col-span-2 p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900 overflow-hidden relative">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ CONFERENCE_STATS.exe</h2>
      <div class="absolute top-3 right-4 flex space-x-2">
        <div class="w-3 h-3 rounded-full bg-red-400"></div>
        <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
        <div class="w-3 h-3 rounded-full bg-green-400"></div>
      </div>
      <pre class="whitespace-pre-wrap text-sm leading-relaxed text-gray-700 dark:text-gray-300 scrollbar-webkit max-h-96 overflow-auto">
        <span class="text-fuchsia-500">$</span> <span class="text-green-500">event fetch --id=DEV_CONF_2024</span>
        <span class="text-gray-500"># Fetching data for Developer Conference 2024...</span>

        <span class="text-pink-400">Status:</span> <span class="text-cyan-400">ACTIVE</span>
        <span class="text-pink-400">Total Attendees:</span> <span class="text-orange-400">1,567</span> <span class="text-gray-500">(+12% vs. Last Year)</span>
        <span class="text-pink-400">Registered Speakers:</span> <span class="text-orange-400">89</span>
        <span class="text-pink-400">Sessions Scheduled:</span> <span class="text-orange-400">125</span>
        <span class="text-pink-400">Available Tickets:</span> <span class="text-orange-400">233</span>

        <span class="text-fuchsia-500">$</span> <span class="text-green-500">metrics show --type=engagement --period=24h</span>
        <span class="text-pink-400">Live Streams:</span>
          <span class="ml-4">Keynote_Main:</span> <span class="text-yellow-400">789 live viewers</span>
          <span class="ml-4">Track_Frontend:</span> <span class="text-yellow-400">321 live viewers</span>
          <span class="ml-4">Track_Backend:</span> <span class="text-yellow-400">288 live viewers</span>
        <span class="text-pink-400">Social Mentions (Last 1hr):</span> <span class="text-yellow-400">+56</span>
        <span class="text-pink-400">App Downloads:</span> <span class="text-yellow-400">1,120</span>

        <span class="text-fuchsia-500">$</span> <span class="text-green-500">alerts status</span>
        <span class="text-green-500">[ OK ]</span> No critical alerts detected.
        <span class="text-orange-500">[ WARN ]</span> Venue capacity 85% for 'AI Revolution' Q&A. Monitor closely.

        <span class="text-fuchsia-500">$</span> <span class="text-green-500">help</span>
        <span class="text-gray-500">Type 'dashboard --full' for extended data.</span>
        <span class="text-gray-500">Type 'commands' for a list of available actions.</span>
      </pre>
    </section>

    <!-- Quick Actions / Command Prompt -->
    <section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900 flex flex-col">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ QUICK_ACTIONS.sh</h2>
      <div class="flex-grow space-y-3 mb-6 scrollbar-webkit overflow-y-auto max-h-64 sm:max-h-full">
        <button class="w-full text-left py-3 px-4 rounded-md bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 hover:bg-purple-300 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-400">
          <span class="text-purple-600 dark:text-purple-300">></span> deploy_update --schedule=A
        </button>
        <button class="w-full text-left py-3 px-4 rounded-md bg-pink-200 dark:bg-fuchsia-700 text-pink-800 dark:text-fuchsia-200 hover:bg-pink-300 dark:hover:bg-fuchsia-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-fuchsia-400">
          <span class="text-pink-600 dark:text-fuchsia-300">></span> send_broadcast_msg "Lunch Break!"
        </button>
        <button class="w-full text-left py-3 px-4 rounded-md bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 hover:bg-teal-300 dark:hover:bg-teal-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-teal-400 dark:focus:ring-teal-400">
          <span class="text-teal-600 dark:text-teal-300">></span> manage_speakers --add
        </button>
        <button class="w-full text-left py-3 px-4 rounded-md bg-orange-200 dark:bg-orange-700 text-orange-800 dark:text-orange-200 hover:bg-orange-300 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-400">
          <span class="text-orange-600 dark:text-orange-300">></span> ticket_sales --report --today
        </button>
      </div>
      <div class="relative">
        <input type="text" placeholder="Enter command..." class="w-full py-2 pl-4 pr-10 text-sm rounded-md bg-pink-200 dark:bg-purple-800 border border-fuchsia-300 dark:border-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent transition-all duration-200 placeholder:text-pink-800 dark:placeholder:text-purple-300 text-pink-900 dark:text-purple-100">
        <button aria-label="Execute command" class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md bg-fuchsia-400 dark:bg-violet-600 hover:bg-fuchsia-500 dark:hover:bg-violet-700 text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">
          <svg class="w-4 h-4" 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>
        </button>
      </div>
    </section>

    <!-- Upcoming Sessions Panel -->
    <section class="lg:col-span-2 p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ UPCOMING_SESSIONS.log</h2>
      <div class="space-y-4 scrollbar-webkit overflow-y-auto max-h-96">
        <div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
          <div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
            <img src="https://picsum.photos/seed/tech/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[10:00 AM - 11:00 AM] | ROOM: HEXAGON</p>
            <h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Future of Quantum Computing (Keynote)</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Dr. Alice Wonderland</p>
          </div>
          <div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
            <button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
          <div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
            <img src="https://picsum.photos/seed/ai/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[11:15 AM - 12:15 PM] | ROOM: NEBULA</p>
            <h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Deep Learning in the Cloud</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Mr. Bob Builder & Ms. Carol Developer</p>
          </div>
          <div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
            <button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
          <div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
            <img src="https://picsum.photos/seed/cyber/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[01:30 PM - 02:30 PM] | ROOM: PIXEL</p>
            <h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Cybersecurity Best Practices 2024</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">S. Hacker</p>
          </div>
          <div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
            <button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
          <div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
            <img src="https://picsum.photos/seed/webdev/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[02:45 PM - 03:45 PM] | ROOM: MATRIX</p>
            <h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Building Responsive UIs with No-Code</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">D. Coder</p>
          </div>
          <div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
            <button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
          </div>
        </div>

      </div>
    </section>

    <!-- Recent Activities Log -->
    <section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900 row-span-2">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ ACTIVITY_LOG.sys</h2>
      <div class="space-y-4 scrollbar-webkit overflow-y-auto max-h-96 lg:max-h-full">
        <div class="p-3 bg-teal-100 dark:bg-gray-800 rounded-md border border-teal-300 dark:border-teal-700">
          <p class="text-sm text-teal-800 dark:text-teal-300"><span class="text-teal-600 dark:text-teal-400">[INFO]</span> <span class="text-gray-600 dark:text-gray-400">09:30:22</span> User <span class="font-medium">@AdminUser</span> approved 5 new speaker applications.</p>
        </div>
        <div class="p-3 bg-pink-100 dark:bg-gray-800 rounded-md border border-pink-300 dark:border-pink-700">
          <p class="text-sm text-pink-800 dark:text-pink-300"><span class="text-pink-600 dark:text-pink-400">[ALERT]</span> <span class="text-gray-600 dark:text-gray-400">09:28:15</span> High server load detected on <code>streaming_server_03</code>.</p>
        </div>
        <div class="p-3 bg-pink-100 dark:bg-gray-800 rounded-md border border-pink-300 dark:border-pink-700">
          <p class="text-sm text-pink-800 dark:text-pink-300"><span class="text-pink-600 dark:text-pink-400">[WARN]</span> <span class="text-gray-600 dark:text-gray-400">09:25:01</span> Payment gateway API reported intermittent disconnects.</p>
        </div>
        <div class="p-3 bg-purple-100 dark:bg-gray-800 rounded-md border border-purple-300 dark:border-purple-700">
          <p class="text-sm text-purple-800 dark:text-purple-300"><span class="text-purple-600 dark:text-purple-400">[ACTION]</span> <span class="text-gray-600 dark:text-gray-400">09:20:45</span> System initiated <code>backup_db_prod.sh</code>.</p>
        </div>
        <div class="p-3 bg-teal-100 dark:bg-gray-800 rounded-md border border-teal-300 dark:border-teal-700">
          <p class="text-sm text-teal-800 dark:text-teal-300"><span class="text-teal-600 dark:text-teal-400">[INFO]</span> <span class="text-gray-600 dark:text-gray-400">09:18:00</span> New attendee registered: Jane Doe.</p>
        </div>
         <div class="p-3 bg-teal-100 dark:bg-gray-800 rounded-md border border-teal-300 dark:border-teal-700">
          <p class="text-sm text-teal-800 dark:text-teal-300"><span class="text-teal-600 dark:text-teal-400">[INFO]</span> <span class="text-gray-600 dark:text-gray-400">09:15:30</span> Session 'Web Security' updated by <span class="font-medium">@SpeakerAdmin</span>.</p>
        </div>
        <div class="p-3 bg-purple-100 dark:bg-gray-800 rounded-md border border-purple-300 dark:border-purple-700">
          <p class="text-sm text-purple-800 dark:text-purple-300"><span class="text-purple-600 dark:text-purple-400">[ACTION]</span> <span class="text-gray-600 dark:text-gray-400">09:10:05</span> Newsletter 'Day 1 Schedule' sent to 15,000 subscribers.</p>
        </div>
        <div class="p-3 bg-pink-100 dark:bg-gray-800 rounded-md border border-pink-300 dark:border-pink-700">
          <p class="text-sm text-pink-800 dark:text-pink-300"><span class="text-pink-600 dark:text-pink-400">[ERROR]</span> <span class="text-gray-600 dark:text-gray-400">09:05:40</span> Failed to sync data with analytics platform. Retrying...</p>
        </div>
      </div>
    </section>

    <!-- Resource Usage / Graphs -->
    <section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ RESOURCE_MONITOR.graph</h2>
      <div class="space-y-6">
        <div>
          <p class="text-gray-700 dark:text-gray-300 mb-2"><span class="text-fuchsia-500">CPU Usage:</span> <span class="text-orange-400">78%</span> <span class="bg-pink-300 dark:bg-violet-700 px-2 py-0.5 rounded text-xs text-pink-800 dark:text-violet-200">HIGH</span></p>
          <div class="w-full bg-pink-200 dark:bg-gray-700 rounded-full h-3">
            <div class="bg-fuchsia-500 h-3 rounded-full" style="width: 78%;"></div>
          </div>
        </div>
        <div>
          <p class="text-gray-700 dark:text-gray-300 mb-2"><span class="text-fuchsia-500">Memory Usage:</span> <span class="text-green-500">45%</span></p>
          <div class="w-full bg-pink-200 dark:bg-gray-700 rounded-full h-3">
            <div class="bg-teal-500 h-3 rounded-full" style="width: 45%;"></div>
          </div>
        </div>
        <div>
          <p class="text-gray-700 dark:text-gray-300 mb-2"><span class="text-fuchsia-500">Network I/O:</span> <span class="text-yellow-500">62%</span></p>
          <div class="w-full bg-pink-200 dark:bg-gray-700 rounded-full h-3">
            <div class="bg-orange-500 h-3 rounded-full" style="width: 62%;"></div>
          </div>
        </div>
        <div class="text-center">
          <button class="py-2 px-5 rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400 text-sm">
            VIEW FULL STATS
          </button>
        </div>
      </div>
    </section>

    <!-- Team Collaboration Status -->
    <section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ TEAM_STATUS.json</h2>
      <div class="space-y-4">
        <div class="flex items-center bg-pink-100 dark:bg-gray-800 p-3 rounded-md border border-fuchsia-300 dark:border-violet-800">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-violet-500 mr-3">
          <div class="flex-grow">
            <p class="font-medium text-pink-800 dark:text-pink-300">John Doe <span class="text-xs text-gray-500 dark:text-gray-400">@jdoe</span></p>
            <p class="text-sm text-gray-700 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400">Online</span> | Task: <code>Monitor Live Streams</code></p>
          </div>
        </div>
        <div class="flex items-center bg-pink-100 dark:bg-gray-800 p-3 rounded-md border border-fuchsia-300 dark:border-violet-800">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-violet-500 mr-3">
          <div class="flex-grow">
            <p class="font-medium text-pink-800 dark:text-pink-300">Jane Smith <span class="text-xs text-gray-500 dark:text-gray-400">@jsmith</span></p>
            <p class="text-sm text-gray-700 dark:text-gray-300">Status: <span class="text-yellow-600 dark:text-yellow-400">Busy</span> | Task: <code>Attendee Support Queries</code></p>
          </div>
        </div>
        <div class="flex items-center bg-pink-100 dark:bg-gray-800 p-3 rounded-md border border-fuchsia-300 dark:border-violet-800">
          <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Team Member Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-violet-500 mr-3">
          <div class="flex-grow">
            <p class="font-medium text-pink-800 dark:text-pink-300">Alex Lee <span class="text-xs text-gray-500 dark:text-gray-400">@alee</span></p>
            <p class="text-sm text-gray-700 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400">Online</span> | Task: <code>Venue A/V Check</code></p>
          </div>
        </div>
      </div>
    </section>

  </main>

  <footer class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
    <p>&copy; 2024 Event OS <span class="text-fuchsia-400 dark:text-violet-400">//</span> All Rights Reserved.</p>
    <p>Version: <span class="text-pink-400 dark:text-fuchsia-400">1.0.0-beta</span></p>
  </footer>

</div>

Composant de pied de page financier

Un composant de pied de page réactif pour les interfaces financières et bancaires, doté d’une palette de couleurs complémentaires, de principes de conception matérielle et d’une prise en charge complète du mode sombre. Comprend des liens de navigation, des icônes de médias sociaux et un avis de droit d’auteur.

Ouvrir Aperçu

                <footer class="bg-blue-900 text-blue-100 py-8 dark:bg-gray-950 dark:text-gray-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 border-b border-blue-700 pb-8 dark:border-gray-800">
      <div class="col-span-full lg:col-span-1">
        <h3 class="text-2xl font-bold text-orange-400 mb-4 dark:text-orange-500">FinTechBank</h3>
        <p class="text-sm text-blue-200 dark:text-gray-400 leading-relaxed">Innovating your financial future with secure and intelligent banking solutions.</p>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Company</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">About Us</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Careers</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Press & Media</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Partner Program</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Products</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Personal Banking</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Business Accounts</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Lending Solutions</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Investment Services</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Support</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Help Center</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">FAQs</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Security</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Legal</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Cookie Policy</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Disclosures</a></li>
        </ul>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-between pt-6 text-sm">
      <p class="mb-4 sm:mb-0 text-blue-300 dark:text-gray-500 text-center sm:text-left">© 2023 FinTechBank. All rights reserved.</p>
      <div class="flex space-x-6">
        <a href="#" aria-label="Facebook" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12c0 5.016 3.655 9.182 8.375 9.94v-7.042H7.078v-2.9h1.921V9.58c0-1.906 1.164-2.955 2.868-2.955 1.096 0 2.036.196 2.308.283v2.55h-1.55c-.752 0-.901.358-.901.884v1.168h2.89l-.47 2.9h-2.42V22c5.016-.818 8.875-5.024 8.875-9.94 0-5.523-4.477-10-10-10z"/></svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.37-.8.47-1.68.8-2.6.98C17.26 4.24 16.21 4 15.15 4c-2.36 0-4.29 1.93-4.29 4.29 0 .34.04.67.11.98C7.54 9.17 4.14 7.37 1.81 4.5c-.37.64-.58 1.39-.58 2.19 0 1.49.75 2.81 1.89 3.59-.7-.02-1.37-.21-1.95-.5v.06c0 2.09 1.48 3.82 3.44 4.21-.36.1-.73.15-1.11.15-.27 0-.53-.02-.79-.08.55 1.71 2.13 2.96 4.01 2.99-1.47 1.15-3.33 1.84-5.36 1.84-.35 0-.69-.02-1.03-.06 1.9 1.22 4.16 1.93 6.6 1.93 7.92 0 12.26-6.55 12.26-12.26 0-.19-.01-.39-.01-.58.84-.6 1.56-1.36 2.14-2.22z"/></svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.273V9.09h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.073a2.464 2.464 0 0 1-2.464-2.464c0-1.363 1.09-2.464 2.464-2.464 1.373 0 2.464 1.1 2.464 2.464 0 1.363-1.091 2.464-2.464 2.464zm1.785 13.38H3.551V9.09h3.571v11.363zM12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2z"/></svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.204-.012 3.584-.07 4.85-1.325 3.252-1.691 4.77-4.919 4.919-1.266.058-1.644.069-4.85.069s-3.583-.012-4.85-.07c-3.251-.149-4.77-1.691-4.919-4.919-.058-1.265-.069-1.644-.069-4.85 0-3.204.012-3.584.07-4.85 1.326-3.252 1.69-4.771 4.919-4.919 1.265-.058 1.644-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072C2.79 0 2.039.264 1.22 1.083s-.82 1.57-.902 2.836c-.059 1.28-.073 1.688-.073 4.948 0 3.26.014 3.668.072 4.948.082 1.266.347 2.017 1.166 2.836S2.79 23.992 4.056 24c1.28.058 1.688.072 4.948.072s3.668-.014 4.948-.072c1.265-.082 2.017-.347 2.836-1.166s.82-1.57.902-2.836c.058-1.28.072-1.688.072-4.948s-.014-3.667-.072-4.947c-.082-1.266-.347-2.017-1.166-2.836S21.21 0 19.944 0c-1.28-.058-1.687-.072-4.947-.072H12zm0 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.5-11.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/></svg>
        </a>
      </div>
    </div>
  </div>
</footer>

1 ... 18 19 20 21 22 ... 335

Rechercher des composants

Catégories

Tous les composants