Search Components

All Components

Browse all available Tailwind CSS components

Community Forum Component - Art Deco Monochromatic

A responsive community forum component designed with an Art Deco aesthetic using a monochromatic color scheme, suitable for Technology/SaaS applications. Features dark mode support and interactive elements.

Open Preview

                <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>

Media Components Component

A complex, responsive media component designed for finance/banking interfaces, featuring an Ocean/Blue color scheme and native dark mode support.

Open Preview

                <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

A minimalist and flat design login form suitable for corporate finance and banking applications, featuring professional blue tones, full responsiveness, and dark mode support.

Open Preview

                <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>

Checkout Form Component

A clean, minimalist and responsive checkout form component with a Swiss/International Typography design influence, muted color scheme, and dark mode support, suitable for finance and banking interfaces.

Open Preview

                <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>

Filters Component

A complex, responsive filters component with a 'Forest/Green palette' and 'Gradient/Color Transitions' design style, suitable for a portfolio. Includes dark mode support and interactive elements.

Open Preview

                <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 Back to Top Button

A skeuomorphic 'Back to Top' button designed with warm neutrals for business/corporate websites, featuring responsive design and dark mode support. The button has a 3D pressed effect.

Open Preview

                <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>

Minimalist Captcha Component

A simple, responsive, and minimalist CAPTCHA component designed for dashboards, using a monochromatic color scheme and supporting dark mode.

Open Preview

                <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

Minimalist Earth Tones Navigation Component

A minimalist, flat design navigation component with an earth-tone color scheme, suitable for consulting/services websites. It includes responsive design for desktop, tablet, and mobile, and supports dark mode.

Open Preview

                <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

A complex, monospace/developer-themed dashboard for event and conference management, featuring candy/sweet color scheme and full responsiveness with dark mode support.

Open Preview

                <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>

Finance Footer Component

A responsive footer component for finance and banking interfaces, featuring a complementary color scheme, Material Design principles, and full dark mode support. Includes navigation links, social media icons, and a copyright notice.

Open Preview

                <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