Search Components

All Components

Browse all available Tailwind CSS components

Healthcare Functional Component

A responsive and thematic component for healthcare applications, featuring industrial design, muted colors, and dark mode support. Displays patient/sensor data with quick actions.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden flex items-start justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden md:flex md:space-x-6 p-4 sm:p-6">
    
    <!-- Left Panel: Profile/Main Info -->
    <div class="flex-shrink-0 w-full md:w-1/3 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700 pb-4 md:pb-0 md:pr-6 mb-4 md:mb-0">
      <div class="flex items-center space-x-4 mb-6">
        <img class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/86.jpg" alt="Patient Avatar">
        <div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">Patient ID: #HM-7890</p>
        </div>
      </div>
      
      <div class="space-y-3">
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          <span>DOB: 1975-04-12</span>
        </div>
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Location: Ward 3, Room 101</span>
        </div>
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9.25m11.28-2.684a1 1 0 00-.948-.684H16a2 2 0 00-2 2v10a2 2 0 002 2h2.28a1 1 0 00.948-.684L22 10.75m-9.28 9.25l-.948 2.36a1 1 0 00.948 1.36h3.28c.188 0 .337-.156.242-.317l-1.442-2.894M5 10.75h2m-2 2h2"></path></svg>
          <span>Assigned Doctor: Dr. Elizabeth Grey</span>
        </div>
      </div>
      
      <button class="mt-6 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md text-sm transition duration-150 ease-in-out
                     focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">
        View Full Record
      </button>
    </div>

    <!-- Right Panel: Data and Actions -->
    <div class="flex-1">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <!-- Sensor Data Card 1 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Heart Rate</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">72 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">bpm</span></p>
          <p class="text-xs text-green-600 dark:text-green-400">Stable</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 5 min</span>
        </div>

        <!-- Sensor Data Card 2 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Blood Pressure</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">120/80 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">mmHg</span></p>
          <p class="text-xs text-green-600 dark:text-green-400">Normal</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 1 hr</span>
        </div>

        <!-- Sensor Data Card 3 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Temperature</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">98.6 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">°F</span></p>
          <p class="text-xs text-orange-600 dark:text-orange-400">Steady</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 30 min</span>
        </div>

        <!-- Sensor Data Card 4 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Oxygen Saturation</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">97% <span class="text-lg font-normal text-gray-600 dark:text-gray-300">SpO2</span></p>
          <p class="text-xs text-red-600 dark:text-red-400">Slight dip</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 10 min</span>
        </div>
      </div>

      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">Quick Actions</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <button class="flex flex-col items-center justify-center p-3 sm:p-4 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 dark:focus:ring-gray-500">
          <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2m-2 0V3m2 2V3m-1 4h.01M16 11l-3-3m0 0l-3 3m3-3v8m0-13h2c.792 0 1.543.344 2.05 1.096L20.2 6.75a1.802 1.802 0 010 2.5L14 15.5m0-10.75v10m-3-10l-2 2-2-2

Social Login Component

A clean, trustworthy social login component for event and conference websites, featuring a multi-color gradient theme and dark mode support. Designed for corporate/professional use.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8">
      <h2 class="text-3xl font-extrabold text-center mb-4 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 text-transparent bg-clip-text dark:from-red-300 dark:via-orange-300 dark:to-yellow-300">
        Welcome to Our Event!
      </h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8">
        Sign in or register to access the event schedule and networking features.
      </p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
          <svg class="w-5 h-5 mr-3"aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5v-6h-1.5v-2h1.5V8.75c0-1.77 1.09-2.75 2.66-2.75 0.77 0 1.55 0.14 1.55 0.14v2.75h-1.38c-0.84 0-1.02 0.52-1.02 1.04v1.5h2.75l-0.44 2.75z"/>
          </svg>
          Continue with Facebook
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
          <svg class="w-5 h-5 mr-3" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
            <path d="M22.675 11.22c0-1.127-0.116-2.193-0.335-3.218h-11.23v6.008h6.216c-0.272 1.393-1.066 2.585-2.228 3.376l-0.016 0.106 4.908 3.805 0.354 0.027c-3.003 2.348-6.791 3.765-10.916 3.765C5.9 24 0 18.09 0 12S5.9 0 12 0c3.272 0 6.22 1.194 8.52 3.149L17.135 6.43C15.7 5.176 13.9 4.545 12 4.545c-4.42 0-8 3.58-8 8s3.58 8 8 8c2.203 0 4.195-0.902 5.6-2.316l0.295-0.306zM12 6.008c2.206 0 4 1.794 4 4h-8c0-2.206 1.794-4 4-4z"/>
          </svg>
          Continue with Google
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
          <svg class="w-5 h-5 mr-3"aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
            <path d="M2.083 23c-1.144 0-2.083-0.939-2.083-2.083v-18.834c0-1.144 0.939-2.083 2.083-2.083h18.834c1.144 0 2.083 0.939 2.083 2.083v18.834c0 1.144-0.939 2.083-2.083 2.083h-18.834zM17.433 7.375c0.88-0.9 1.144-2.124 0.655-3.328-0.489-1.204-1.633-1.956-2.909-1.895h-10.428v17.75h1.758v-8.988c0-0.457 0.057-0.914 0.171-1.341 0.32-1.047 1.096-1.841 2.171-2.209s2.21-0.278 3.197 0.18c0.988 0.457 1.633 1.341 1.884 2.455 0.252 1.114 0.086 2.298-0.489 3.292L17.433 7.375z"/>
          </svg>
          Continue with Apple
        </button>
      </div>

      <div class="relative my-8">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
            Or continue with email
          </span>
        </div>
      </div>

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

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

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

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

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white
            bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 hover:from-red-600 hover:via-orange-600 hover:to-yellow-600
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
            Sign In
          </button>
        </div>
      </form>

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

CorporateProfessionalAccordion

A high-contrast, corporate/professional-themed accordion component suitable for non-profit and charitable organizations. Features a clean design, bold color combinations, and full responsiveness with dark mode support.

Open Preview

                <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-xl">
  <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Frequently Asked Questions</h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden transform transition-all duration-300 hover:shadow-lg dark:hover:shadow-xl">
      <input type="checkbox" id="accordion-1" class="hidden peer" aria-expanded="false">
      <label for="accordion-1" class="flex items-center justify-between p-6 cursor-pointer select-none text-lg font-semibold text-sky-800 dark:text-sky-400 bg-sky-100 dark:bg-gray-700 transition-colors duration-300 peer-checked:bg-sky-200 dark:peer-checked:bg-gray-600 border-b-2 border-sky-200 dark:border-gray-700 peer-checked:border-sky-500 dark:peer-checked:border-sky-400">
        What is the mission of our organization?
        <svg class="w-6 h-6 text-sky-800 dark:text-sky-400 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" 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 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="p-6 overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500 ease-in-out text-gray-700 dark:text-gray-300">
        <p>Our mission is to empower communities through education, health initiatives, and sustainable development programs. We strive to create lasting positive change by addressing root causes of inequality and fostering self-reliance.</p>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden transform transition-all duration-300 hover:shadow-lg dark:hover:shadow-xl">
      <input type="checkbox" id="accordion-2" class="hidden peer" aria-expanded="false">
      <label for="accordion-2" class="flex items-center justify-between p-6 cursor-pointer select-none text-lg font-semibold text-lime-800 dark:text-lime-400 bg-lime-100 dark:bg-gray-700 transition-colors duration-300 peer-checked:bg-lime-200 dark:peer-checked:bg-gray-600 border-b-2 border-lime-200 dark:border-gray-700 peer-checked:border-lime-500 dark:peer-checked:border-lime-400">
        How can I contribute or volunteer?
        <svg class="w-6 h-6 text-lime-800 dark:text-lime-400 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" 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 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="p-6 overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500 ease-in-out text-gray-700 dark:text-gray-300">
        <p>We welcome all forms of support! You can contribute by making a donation through our website, volunteering your time for our local projects, or spreading awareness about our cause. Visit our 'Get Involved' page for more details.</p>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden transform transition-all duration-300 hover:shadow-lg dark:hover:shadow-xl">
      <input type="checkbox" id="accordion-3" class="hidden peer" aria-expanded="false">
      <label for="accordion-3" class="flex items-center justify-between p-6 cursor-pointer select-none text-lg font-semibold text-teal-800 dark:text-teal-400 bg-teal-100 dark:bg-gray-700 transition-colors duration-300 peer-checked:bg-teal-200 dark:peer-checked:bg-gray-600 border-b-2 border-teal-200 dark:border-gray-700 peer-checked:border-teal-500 dark:peer-checked:border-teal-400">
        Where do our donations go?
        <svg class="w-6 h-6 text-teal-800 dark:text-teal-400 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" 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 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="p-6 overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500 ease-in-out text-gray-700 dark:text-gray-300">
        <p>Every donation directly supports our programs and beneficiaries. We prioritize transparency and accountability, ensuring that at least 85% of all funds go directly to our field projects, with the remainder covering essential administrative costs.</p>
      </div>
    </div>

    <!-- Accordion Item 4 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden transform transition-all duration-300 hover:shadow-lg dark:hover:shadow-xl">
      <input type="checkbox" id="accordion-4" class="hidden peer" aria-expanded="false">
      <label for="accordion-4" class="flex items-center justify-between p-6 cursor-pointer select-none text-lg font-semibold text-purple-800 dark:text-purple-400 bg-purple-100 dark:bg-gray-700 transition-colors duration-300 peer-checked:bg-purple-200 dark:peer-checked:bg-gray-600 border-b-2 border-purple-200 dark:border-gray-700 peer-checked:border-purple-500 dark:peer-checked:border-purple-400">
        How can I get updates on your impact?
        <svg class="w-6 h-6 text-purple-800 dark:text-purple-400 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" 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 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="p-6 overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500 ease-in-out text-gray-700 dark:text-gray-300">
        <p>We regularly share impact reports, success stories, and financial statements on our website. You can also subscribe to our newsletter to receive monthly updates directly in your inbox and follow us on social media.</p>
      </div>
    </div>
  </div>
</div>

Bauhaus Progress Bar Component

A moderate complexity, responsive, Bauhaus-inspired progress bar component suitable for entertainment/media platforms, featuring cool neutrals and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 space-y-6">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white">Now Playing</h2>
        <svg class="h-8 w-8 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4"></path>
        </svg>
      </div>

      <div class="relative w-full rounded-full h-3 bg-gray-200 dark:bg-gray-700 overflow-hidden group">
        <div class="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full transition-all duration-500 ease-out" style="width: 65%;"></div>
        <div class="absolute top-1/2 -translate-y-1/2 left-[65%] w-4 h-4 bg-gray-900 dark:bg-gray-200 rounded-full border-2 border-gray-900 dark:border-gray-200 group-hover:scale-125 transition-transform duration-200 ease-out"></div>
      </div>

      <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 font-medium">
        <span class="text-gray-900 dark:text-white">03:45</span>
        <span>05:30</span>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 items-center pt-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/id/1047/100/100" alt="Album Art" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg object-cover border-2 border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white leading-tight">Geometric Dreams</p>
            <p class="text-md sm:text-lg text-gray-600 dark:text-gray-400 mt-1">The Bauhaus Ensemble</p>
          </div>
        </div>

        <div class="flex justify-around sm:justify-end space-x-6">
          <button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 19l-7.5-7.5 7.5-7.5" />
            </svg>
          </button>
          <button class="p-4 sm:p-5 rounded-full bg-blue-500 text-white shadow-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24">
              <path fill-rule="evenodd" d="M6 5v14a1 1 0 001.5 1.32l11-7a1 1 0 000-1.64l-11-7A1 1 0 006 5z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Follow Button Component

A clean, minimalist 'Follow' button designed with a retro/vintage color palette, suitable for a dashboard or profile page. It features an interactive hover state and dark mode support, embodying Swiss/International typography principles.

Open Preview

                <div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto font-sans">
  <div class="flex flex-col items-center space-y-4">
    <img class="w-20 h-20 rounded-full object-cover border-2 border-indigo-400 dark:border-indigo-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div class="text-center">
      <p class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Jane Doe</p>
      <p class="text-sm text-zinc-600 dark:text-zinc-400">@janedoe_official</p>
    </div>
    <button class="px-6 py-2 rounded-full border-2 border-indigo-500 bg-indigo-400 text-white font-bold text-sm tracking-wide uppercase shadow-md
                   hover:bg-indigo-500 hover:border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
                   dark:bg-indigo-600 dark:border-indigo-700 dark:hover:bg-indigo-700 dark:focus:ring-offset-zinc-800
                   transition duration-300 ease-in-out">
      Follow
    </button>
  </div>
</div>

Sidebar Navigation Component

A complex, responsive sidebar navigation component for a marketplace UI, featuring vibrant colors and dark mode support. Includes multiple sections, interactive elements, and user profile.

Open Preview

                <div class="flex h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-gray-900 border-r border-gray-800 shadow-xl dark:bg-gray-900 dark:border-gray-800 transition-all duration-300 ease-in-out sm:w-64 md:w-64 lg:w-64">
    <div class="flex items-center justify-between h-16 px-6 border-b border-gray-800 dark:border-gray-800">
      <span class="text-2xl font-bold text-yellow-400 dark:text-yellow-400">MarketPulse</span>
      <!-- Mobile menu button for collapsing / expanding if needed for smaller screens -->
      <button class="flex items-center justify-center p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-inset focus:ring-yellow-500 lg:hidden">
        <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>

    <div class="flex-1 overflow-y-auto pt-4 pb-8">
      <nav class="mt-4 space-y-2">
        <!-- Main Navigation -->
        <h3 class="px-6 uppercase text-xs font-semibold text-gray-400 mb-2">Dashboard</h3>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-13 13v-3a1 1 0 011-1h6a1 1 0 011 1v3m-6 3h6a2 2 0 002-2v-7a2 2 0 00-2-2H9a2 2 0 00-2 2v7a2 2 0 002 2z" />
          </svg>
          Home
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 110 18 9 9 0 010-18zm-2 9l2 2 4-4" />
          </svg>
          Orders
          <span class="ml-auto bg-purple-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full dark:bg-purple-600">5</span>
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2a3 3 0 01-3-2c0-1.105 1.343-2 3-2zM3 12s2 5 9 5 9-5 9-5H3z" />
          </svg>
          Products
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
          Payments
        </a>

        <!-- Marketplace Tools -->
        <h3 class="px-6 uppercase text-xs font-semibold text-gray-400 mt-6 mb-2">Market Tools</h3>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
          </svg>
          Listings
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
          </svg>
          Messages
          <span class="ml-auto bg-orange-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full dark:bg-orange-600">99+</span>
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          Analytics
        </a>

        <!-- Settings & Support -->
        <h3 class="px-6 uppercase text-xs font-semibold text-gray-400 mt-6 mb-2">Account</h3>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.51-.129 1.05-.129 1.56 0A7.5 7.5 0 0121 12a7.5 7.5 0 01-9.675 7.683A7.5 7.5 0 013 12a7.5 7.5 0 017.325-7.683z" />
          </svg>
          Settings
        </a>
        <a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9.247a1 1 0 011.004-1.127l2.164.216a1 1 0 00.957-.456l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 01-1.01-.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308zM12 15a3 3 0 100-6 3 3 0 000 6z" />
          </svg>
          Support
        </a>
      </nav>
    </div>

    <!-- User Profile/Settings at bottom -->
    <div class="flex items-center px-6 py-4 border-t border-gray-800 dark:border-gray-800">
      <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-yellow-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <div>
        <p class="text-sm font-semibold text-white">Jane Doe</p>
        <p class="text-xs text-gray-400">Vendor Account</p>
      </div>
      <button type="button" class="ml-auto p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-gray-900">
        <svg class="h-6 w-6 text-gray-400 hover:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
        </svg>
      </button>
    </div>

  </div>

  <!-- Main Content Area Placeholder -->
  <div class="flex-1 flex flex-col">
    <header class="flex items-center justify-between h-16 px-6 border-b border-gray-800 dark:border-gray-800 bg-gray-950 dark:bg-gray-950">
      <h1 class="text-xl font-semibold text-white">Overview Dashboard</h1>
      <div class="flex items-center space-x-4">
        <button class="p-2 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 rounded-md">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>
        <button class="p-2 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 rounded-md">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </button>
      </div>
    </header>

    <main class="flex-1 overflow-y-auto p-6 bg-gray-950 dark:bg-gray-950">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-gray-900 rounded-lg shadow-lg p-6 hover:shadow-yellow-500/20 transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-lg font-semibold text-yellow-400 mb-2">Total Sales</h2>
          <p class="text-4xl font-bold text-white mb-4">$12,345</p>
          <div class="flex items-center text-green-400">
            <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
            <span class="text-sm">+5.2% last month</span>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="bg-gray-900 rounded-lg shadow-lg p-6 hover:shadow-purple-500/20 transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-lg font-semibold text-purple-400 mb-2">New Orders</h2>
          <p class="text-4xl font-bold text-white mb-4">1,234</p>
          <div class="flex items-center text-red-400">
            <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
            </svg>
            <span class="text-sm">-1.5% last month</span>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="bg-gray-900 rounded-lg shadow-lg p-6 hover:shadow-blue-500/20 transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-lg font-semibold text-blue-400 mb-2">Active Listings</h2>
          <p class="text-4xl font-bold text-white mb-4">567</p>
          <div class="flex items-center text-green-400">
            <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
            <span class="text-sm">+10 new this week</span>
          </div>
        </div>
      </div>

      <div class="bg-gray-900 rounded-lg shadow-lg p-6 mt-6">
        <h2 class="text-lg font-semibold text-white mb-4">Recent Activities</h2>
        <ul class="divide-y divide-gray-800">
          <li class="flex items-center justify-between py-3">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-green-500" src="https://picsum.photos/id/65/50/50" alt="Product Image">
              <div>
                <p class="text-white font-medium">Order <span class="text-yellow-400">#12345</span> processed</p>
                <p class="text-sm text-gray-400">New Playstation 5 disc version</p>
              </div>
            </div>
            <span class="text-sm text-gray-500">2 hours ago</span>
          </li>
          <li class="flex items-center justify-between py-3">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-blue-500" src="https://picsum.photos/id/237/50/50" alt="Product Image">
              <div>
                <p class="text-white font-medium">New product <span class="text-yellow-400">'Gaming Mouse X'</span> listed</p>
                <p class="text-sm text-gray-400">Added to Electronics category</p>
              </div>
            </div>
            <span class="text-sm text-gray-500">Yesterday</span>
          </li>
          <li class="flex items-center justify-between py-3">
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-red-500" src="https://picsum.photos/id/1084/50/50" alt="Product Image">
              <div>
                <p class="text-white font-medium">Payment of <span class="text-yellow-400">$250.00</span> received</p>
                <p class="text-sm text-gray-400">From customer John Doe</p>
              </div>
            </div>
            <span class="text-sm text-gray-500">3 days ago</span>
          </li>
        </ul>
      </div>
    </main>
  </div>
</div>

Marketplace Alert Messages Component

A Material Design-inspired alert messages component with autumn colors, suitable for marketplace platforms. Features various alert types (success, warning, error, info) with dismissible options and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Success Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 ring-1 ring-green-200 dark:ring-green-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Success! Your listing has been published.</h3>
      <p class="text-sm opacity-90">Buyers can now view and purchase your amazing product. Good luck!</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-800 dark:text-green-300 dark:hover:bg-green-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <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.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100 ring-1 ring-yellow-200 dark:ring-yellow-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l8.601 15.354c.763 1.36-.217 3.047-1.748 3.047H1.404c-1.53 0-2.51-1.687-1.747-3.047l8.604-15.354zM11 15a1 1 0 11-2 0 1 1 0 012 0zm-1-6a1 1 0 00-1 1v3a1 1 0 102 0v-3a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Heads up! Some listings are missing images.</h3>
      <p class="text-sm opacity-90">Listings with images tend to have higher engagement. Please update them soon.</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-800 dark:text-yellow-300 dark:hover:bg-yellow-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <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.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-100 ring-1 ring-red-200 dark:ring-red-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-9a1 1 0 011-1h1.586l-.293-.293a1 1 0 011.414-1.414l2 2a1 1 0 010 1.414l-2 2a1 1 0 01-1.414-1.414l.293-.293H4a1 1 0 01-1-1zm11-1a1 1 0 00-1-1h-1.586l.293-.293a1 1 0 00-1.414-1.414l-2 2a1 1 0 000 1.414l2 2a1 1 0 001.414-1.414l-.293-.293H16a1 1 0 001-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Error! Publishing failed for item #12345.</h3>
      <p class="text-sm opacity-90">There was an issue processing your request. Please check your data and try again.</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-800 dark:text-red-300 dark:hover:bg-red-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <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.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Info Alert with Action Button (Autumn Colors) -->
  <div class="mb-6 flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg shadow-md bg-amber-100 dark:bg-amber-800 text-amber-900 dark:text-amber-100 ring-1 ring-amber-200 dark:ring-amber-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-0 sm:mr-3 mb-2 sm:mb-0 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Important Update: Our commission rates are changing.</h3>
      <p class="text-sm opacity-90">Starting November 1st, a new commission structure will be applied to all sales. Review the details to stay informed.</p>
    </div>
    <div class="flex items-center mt-3 sm:mt-0 ml-0 sm:ml-4 flex-shrink-0">
      <button type="button" class="bg-amber-700 hover:bg-amber-800 focus:ring-4 focus:ring-amber-300 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-amber-800 text-white font-medium rounded-lg text-sm px-4 py-2 text-center transition-colors duration-200 ease-in-out">View Details</button>
      <button type="button" class="ml-2 -mx-1.5 -my-1.5 bg-amber-100 text-amber-500 rounded-lg focus:ring-2 focus:ring-amber-400 p-1.5 hover:bg-amber-200 inline-flex h-8 w-8 dark:bg-amber-800 dark:text-amber-300 dark:hover:bg-amber-700" aria-label="Dismiss">
        <span class="sr-only">Dismiss</span>
        <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.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>

</div>

Registration Form Component

A responsive registration form component with a 3D design aesthetic, incorporating sepia/brown tones, suitable for social media applications. It supports dark mode and utilizes semantic HTML for accessibility.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-stone-200 via-stone-100 to-stone-200 dark:from-stone-900 dark:via-stone-950 dark:to-stone-900 py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center font-sans">
  <div class="max-w-md w-full relative group perspective-1000">
    <!-- Front of the 3D card -->
    <div class="transform-style-preserve-3d transition-transform duration-700 ease-in-out group-hover:rotate-y-180 backface-hidden rounded-2xl shadow-xl border border-stone-300 dark:border-stone-700 p-8 space-y-8 bg-gradient-to-br from-stone-50 via-stone-100 to-stone-50 dark:from-stone-800 dark:via-stone-900 dark:to-stone-800">
      <div class="text-center">
        <h2 class="mt-6 text-3xl font-extrabold text-stone-800 dark:text-stone-100 drop-shadow-sm">
          Join Our Social Network
        </h2>
        <p class="mt-2 text-sm text-stone-600 dark:text-stone-400">
          Create your profile and connect with friends!
        </p>
      </div>
      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="username" class="sr-only">Username</label>
            <input id="username" name="username" type="text" autocomplete="username" required
              class="appearance-none rounded-t-md relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
              placeholder="Username">
          </div>
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required
              class="appearance-none rounded-none relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
              placeholder="Email address">
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="new-password" required
              class="appearance-none rounded-b-md relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
              placeholder="Password">
          </div>
        </div>

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

          <div class="text-sm">
            <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transform translate-z-10">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit"
            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-br from-amber-600 to-amber-700 hover:from-amber-700 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-900 shadow-lg shadow-amber-500/30 dark:shadow-amber-700/30 transition duration-300 ease-in-out transform translate-z-10 hover:translate-z-20 hover:scale-105 active:scale-95 active:translate-z-5">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <!-- Heroicon name: solid/lock-closed -->
              <svg class="h-5 w-5 text-amber-300 group-hover:text-amber-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </span>
            Sign Up
          </button>
        </div>
      </form>
    </div>

    <!-- Back of the 3D card -->
    <div class="transform-style-preserve-3d transition-transform duration-700 ease-in-out rotate-y-180 backface-hidden absolute inset-0 rounded-2xl shadow-xl border border-stone-300 dark:border-stone-700 p-8 space-y-8 bg-gradient-to-bl from-stone-50 via-stone-100 to-stone-50 dark:from-stone-800 dark:via-stone-900 dark:to-stone-800">
      <div class="text-center">
        <h2 class="mt-6 text-3xl font-extrabold text-stone-800 dark:text-stone-100 drop-shadow-sm">
          Welcome Back!
        </h2>
        <p class="mt-2 text-sm text-stone-600 dark:text-stone-400">
          Already have an account? Sign in here.
        </p>
      </div>
      <div class="flex flex-col items-center justify-center space-y-4">
        <img class="h-24 w-24 rounded-full border-4 border-amber-500 shadow-md" src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar">
        <p class="text-lg font-semibold text-stone-800 dark:text-stone-100">John Doe</p>
        <button type="button"
          class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-br from-lime-600 to-lime-700 hover:from-lime-700 hover:to-lime-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-stone-900 shadow-lg shadow-lime-500/30 dark:shadow-lime-700/30 transition duration-300 ease-in-out transform translate-z-10 hover:translate-z-20 hover:scale-105 active:scale-95 active:translate-z-5">
          Go to Profile
        </button>
        <p class="text-sm text-stone-600 dark:text-stone-400 mt-4">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Or log in with another account</a>
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is necessary for the 3D effect */
  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .translate-z-10 {
    transform: translateZ(10px);
  }

  .translate-z-20 {
    transform: translateZ(20px);
  }

  .translate-z-5 {
    transform: translateZ(5px);
  }

  /* Custom styles for the 3D rotation */
  @media (hover: hover) {
    .group:hover .transform-style-preserve-3d:first-child {
      transform: rotateY(180deg);
    }
    .group:hover .transform-style-preserve-3d:last-child {
      transform: rotateY(360deg);
    }
  }

  /* Fallback for touch devices or if hover is not available */
  /* You might replace `group:hover` with a JavaScript-triggered class toggle in a real app */
  .group-hover\:rotate-y-180 {
    transform: rotateY(180deg);
  }
  .group-hover\:rotate-y-360 {
    transform: rotateY(360deg);
  }
</style>

Brutalist_Weather_Search_Box

A complex, high-contrast, brutalist-style search box component for weather and climate data, featuring multiple input elements and responsive design with dark mode support.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen bg-gray-100 dark:bg-zinc-950 flex items-start justify-center font-mono">
  <div class="w-full max-w-4xl border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-900 shadow-[10px_10px_0_0_#1a202c] dark:shadow-[10px_10px_0_0_#a3e635] p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold text-black dark:text-lime-400 uppercase tracking-tighter mb-6 leading-none border-b-4 border-black dark:border-lime-400 pb-2">
      Climate Query Interface <span class="text-red-600 dark:text-orange-500">_V1.0</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 md:gap-10">
      <div class="flex flex-col space-y-4">
        <label for="location-input" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase">
          LOCALE: <span class="text-red-600 dark:text-orange-500">WHERE?</span>
        </label>
        <input type="text" id="location-input" placeholder="e.g., Tokyo, Japan, New York City, or Latitude,Longitude" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-yellow-300 dark:bg-zinc-800 text-black dark:text-white placeholder:text-gray-700 dark:placeholder:text-gray-400 focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635] tracking-wide">

        <label for="date-range-start" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase mt-4">
          PERIOD: <span class="text-red-600 dark:text-orange-500">WHEN?</span>
        </label>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <input type="date" id="date-range-start" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-fuchsia-300 dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635]">
          <input type="date" id="date-range-end" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-fuchsia-300 dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635]">
        </div>
      </div>

      <div class="flex flex-col space-y-4">
        <label for="data-type" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase">
          METRIC: <span class="text-red-600 dark:text-orange-500">WHAT?</span>
        </label>
        <select id="data-type" class="w-full p-3 sm:p-4 border-4 border-black dark:border-lime-400 bg-cyan-300 dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-orange-500 text-base sm:text-lg uppercase shadow-[4px_4px_0_0_#1a202c] dark:shadow-[4px_4px_0_0_#a3e635]">
          <option value="temperature" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Temperature (Avg/Max/Min)</option>
          <option value="precipitation" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Precipitation (mm/in)</option>
          <option value="humidity" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Humidity (%)</option>
          <option value="wind-speed" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Wind Speed (kph/mph)</option>
          <option value="uv-index" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">UV Index</option>
          <option value="pressure" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Atmospheric Pressure (hPa)</option>
          <option value="air-quality" class="text-black dark:text-white bg-cyan-300 dark:bg-zinc-800">Air Quality (AQI)</option>
        </select>

        <label for="output-format" class="block text-lg sm:text-xl font-bold text-black dark:text-lime-400 uppercase mt-4">
          FORMAT: <span class="text-red-600 dark:text-orange-500">HOW?</span>
        </label>
        <div class="flex flex-wrap gap-4">
          <label class="inline-flex items-center group">
            <input type="radio" name="output-format" value="graph" class="form-radio h-6 w-6 text-red-600 dark:text-orange-500 border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-800 focus:ring-red-500 dark:focus:ring-orange-500 group-hover:bg-red-200 dark:group-hover:bg-zinc-700 transition ease-in-out duration-150">
            <span class="ml-2 text-base sm:text-lg text-black dark:text-white uppercase font-bold">Graph</span>
          </label>
          <label class="inline-flex items-center group">
            <input type="radio" name="output-format" value="table" class="form-radio h-6 w-6 text-red-600 dark:text-orange-500 border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-800 focus:ring-red-500 dark:focus:ring-orange-500 group-hover:bg-red-200 dark:group-hover:bg-zinc-700 transition ease-in-out duration-150" checked>
            <span class="ml-2 text-base sm:text-lg text-black dark:text-white uppercase font-bold">Table</span>
          </label>
          <label class="inline-flex items-center group">
            <input type="radio" name="output-format" value="raw" class="form-radio h-6 w-6 text-red-600 dark:text-orange-500 border-4 border-black dark:border-lime-400 bg-white dark:bg-zinc-800 focus:ring-red-500 dark:focus:ring-orange-500 group-hover:bg-red-200 dark:group-hover:bg-zinc-700 transition ease-in-out duration-150">
            <span class="ml-2 text-base sm:text-lg text-black dark:text-white uppercase font-bold">Raw JSON</span>
          </label>
        </div>
      </div>
    </div>

    <button class="mt-8 w-full p-4 sm:p-5 md:p-6 bg-red-600 dark:bg-orange-500 text-white dark:text-black font-extrabold text-xl sm:text-2xl md:text-3xl lg:text-4xl uppercase border-4 border-black dark:border-lime-400 shadow-[6px_6px_0_0_#1a202c] dark:shadow-[6px_6px_0_0_#a3e635] hover:shadow-[0_0_0_0] hover:translate-x-2 hover:translate-y-2 transition-all duration-150 ease-out active:scale-95 tracking-tight">
      EXECUTE CLIMATE QUERY
      <span class="ml-2 text-yellow-300 dark:text-lime-200">// GO!</span>
    </button>

    <div class="mt-8 border-t-4 border-black dark:border-lime-400 pt-4 text-center">
      <p class="text-sm text-gray-700 dark:text-gray-300 font-bold uppercase">
        <span class="text-red-600 dark:text-orange-500">WARNING:</span> Data may contain anomalies. Trust at your own risk. // System v7.8a
      </p>
    </div>
  </div>
</div>

Add to Cart Button Component

A nature-inspired, candy-colored 'Add to Cart' button component designed for a forum/community platform, featuring a flowing, organic style. It's responsive and supports dark mode.

Open Preview

                <div class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen">
  <button class="relative flex items-center justify-center
                 px-8 py-3
                 font-bold text-lg text-white
                 transition-all duration-300 ease-in-out
                 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-purple-700
                 group
                 overflow-hidden
                 bg-gradient-to-br from-pink-400 via-purple-400 to-green-400
                 dark:from-pink-700 dark:via-purple-700 dark:to-green-700
                 shadow-lg shadow-pink-300/50 dark:shadow-purple-700/50
                 rounded-full
                 transform hover:scale-105 active:scale-95
                 border-2 border-transparent hover:border-white dark:hover:border-gray-800">

    <span class="relative z-10 flex items-center gap-2">
      <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path>
      </svg>
      <span>Add to Cart</span>
    </span>

    <!-- Organic blob background for hover effect -->
    <div class="absolute inset-0 z-0 
                  bg-gradient-to-br from-white/20 via-white/5 to-white/20
                  dark:from-black/20 dark:via-black/5 dark:to-black/20 
                  transform 
                  scale-0 group-hover:scale-100 
                  transition-all duration-500 ease-out 
                  rounded-full 
                  blur-lg opacity-0 group-hover:opacity-100
                  bg-opacity-0 group-hover:bg-opacity-100
                  origin-center
                  "></div>

    <div class="absolute inset-0 z-0 
                  bg-gradient-to-br from-pink-300 via-purple-300 to-green-300
                  dark:from-pink-600 dark:via-purple-600 dark:to-green-600
                  transform 
                  scale-0 group-hover:scale-100 
                  transition-all duration-500 ease-out 
                  rounded-full 
                  blur-md opacity-0 group-hover:opacity-75
                  origin-center
                  " style="clip-path: ellipse(60% 60% at 50% 50%);"></div>

  </button>
</div>

1 ... 78 79 80 81 82 ... 335

Search Components

Categories

All Components