Search Components

All Components

Browse all available Tailwind CSS components

Neumorphic Site Map Component

A complex, responsive site map component designed in a neumorphic style with jewel tones, suitable for government or public service websites, including dark mode support.

Open Preview

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

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

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

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

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

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

    </div>

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

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

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

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

  </div>

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

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

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

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

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

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

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

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

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

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


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

  </style>
</div>

Memphis_Dating_Modal

A complex, responsive modal component designed in a Memphis/Retro style for dating and social platforms, featuring bold colors, geometric shapes, interactive elements, and dark mode support.

Open Preview

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

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

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

Art Deco Wishlist Component

A complex, responsive Art Deco style wishlist component inspired by 1920s-1930s luxury, featuring jewel tones suitable for finance/banking interfaces. Includes dark mode support.

Open Preview

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

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

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

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

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

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

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

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

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

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

Retro_Crypto_Password_Reset_Component

A complex, retro/vintage-themed password reset component designed for cryptocurrency and blockchain applications, featuring multi-step interaction, responsive layout, and dark mode support.

Open Preview

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

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

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

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

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

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

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

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

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

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

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

A sophisticated pagination component inspired by Art Deco aesthetics, featuring geometric patterns and a corporate blue color scheme. It's responsive, includes dark mode support, and is suitable for professional business websites.

Open Preview

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

User Profiles Component

A complex, responsive user profiles component for news/journalism websites, featuring a Bauhaus-inspired design with a bright candy/sweet color scheme and dark mode support. Displays multiple user profiles with profile pictures, names, titles, and follower counts, designed for a rich interface.

Open Preview

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

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

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

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

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

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

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

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

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

    </div>

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

Industrial_Monochromatic_Tabs_Component_Booking_Reservation

A simple, responsive tabs component with an industrial, monochromatic aesthetic, designed for booking and reservation systems. It supports dark mode and uses raw materials and exposed elements for utilitarian appeal.

Open Preview

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

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

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

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

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

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

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

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

Retro_Candy_CAPTCHA_Component

A complex, retro/vintage style CAPTCHA component with a candy/sweet color scheme, designed for booking and reservation systems. Features multiple interactive elements, fully responsive layout, and dark mode support.

Open Preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Social Share Buttons Component

A simple, responsive social share buttons component with a Memphis design inspired aesthetic using cool neutral colors, suitable for CRM/business tools. Includes dark mode support.

Open Preview

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

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

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

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

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
         aria-label="Share on Facebook">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.887 8.438-9.878Z" clip-rule="evenodd" />
        </svg>
      </a>

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

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

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

    </div>

  </div>
</div>

Follow Button Component

A complex, paper/print-inspired follow button component for gaming websites, featuring a black and white monochrome design with a bright accent color, optimized for responsiveness and dark mode.

Open Preview

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

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

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

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

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

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

Search Components

Categories

All Components

Neumorphic Site Map Component

Memphis_Dating_Modal

Art Deco Wishlist Component

Retro_Crypto_Password_Reset_Component

Art Deco Corporate Pagination

User Profiles Component

Industrial_Monochromatic_Tabs_Component_Booking_Reservation

Retro_Candy_CAPTCHA_Component

Social Share Buttons Component

Follow Button Component