Search Components

Forms

Collection of fields for gathering user input

Neumorphic_Fashion_Form

A complex, responsive, neumorphic form component with a muted/desaturated color scheme, designed for fashion and beauty brands, featuring multiple interactive elements and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-200 p-4 sm:p-8 flex items-center justify-center font-sans dark:bg-gray-800 transition-colors duration-300">
  <div class="w-full max-w-4xl bg-gray-200 rounded-3xl shadow-neumorphic-light-xl p-6 sm:p-10 md:p-12 transition-all duration-300 dark:bg-gray-800 dark:shadow-neumorphic-dark-xl">
    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-700 mb-8 text-center dark:text-gray-200">
      Elevate Your Style Profile
    </h2>

    <form action="#" method="POST">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
        <!-- Personal Information Section -->
        <div class="col-span-full mb-4">
          <h3 class="text-xl sm:text-2xl font-medium text-gray-600 mb-4 dark:text-gray-300">Personal Details</h3>
        </div>

        <!-- First Name -->
        <div>
          <label for="first-name" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">First Name</label>
          <input type="text" id="first-name" name="first-name" placeholder="Jane" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
        </div>

        <!-- Last Name -->
        <div>
          <label for="last-name" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Last Name</label>
          <input type="text" id="last-name" name="last-name" placeholder="Doe" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
        </div>

        <!-- Email Address -->
        <div class="md:col-span-2">
          <label for="email" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
        </div>

        <!-- Styling Preferences Section -->
        <div class="col-span-full mt-6 mb-4">
          <h3 class="text-xl sm:text-2xl font-medium text-gray-600 mb-4 dark:text-gray-300">Styling Preferences</h3>
        </div>

        <!-- Style Category Multi-select -->
        <div class="md:col-span-2">
          <label for="style-category" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Preferred Style Categories</label>
          <div class="relative">
            <select multiple id="style-category" name="style-category[]" class="w-full p-3 pr-10 appearance-none bg-gray-200 rounded-xl shadow-neumorphic-inset-light focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200 h-32 sm:h-auto min-h-[100px] sm:min-h-0">
              <option value="casual">Casual Chic</option>
              <option value="boho">Bohemian Rhapsody</option>
              <option value="minimalist">Minimalist Elegance</option>
              <option value="glam">Glamour & Evening</option>
              <option value="sporty">Sporty Luxe</option>
              <option value="vintage">Vintage Charm</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500 dark:text-gray-400">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2 dark:text-gray-500">Hold Ctrl/Cmd to select multiple options.</p>
        </div>

        <!-- Body Type Radios -->
        <div>
          <label class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Body Type</label>
          <div class="space-y-3">
            <div class="flex items-center">
              <input type="radio" id="hourglass" name="body-type" value="hourglass" class="hidden peer">
              <label for="hourglass" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
                Hourglass
              </label>
            </div>
            <div class="flex items-center">
              <input type="radio" id="rectangle" name="body-type" value="rectangle" class="hidden peer">
              <label for="rectangle" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
                Rectangle
              </label>
            </div>
            <div class="flex items-center">
              <input type="radio" id="pear" name="body-type" value="pear" class="hidden peer">
              <label for="pear" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
                Pear
              </label>
            </div>
          </div>
        </div>

        <!-- Preferred Colors Checkbox Group -->
        <div>
          <label class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Preferred Color Palette</label>
          <div class="grid grid-cols-2 gap-3">
            <div class="flex items-center select-none">
              <input type="checkbox" id="neutral" name="colors[]" value="neutral" class="hidden peer">
              <label for="neutral" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Neutrals</span>
              </label>
            </div>
            <div class="flex items-center select-none">
              <input type="checkbox" id="pastels" name="colors[]" value="pastels" class="hidden peer">
              <label for="pastels" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Pastels</span>
              </label>
            </div>
             <div class="flex items-center select-none">
              <input type="checkbox" id="bold" name="colors[]" value="bold" class="hidden peer">
              <label for="bold" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Bold Hues</span>
              </label>
            </div>
            <div class="flex items-center select-none">
              <input type="checkbox" id="earth" name="colors[]" value="earth" class="hidden peer">
              <label for="earth" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Earth Tones</span>
              </label>
            </div>
          </div>
        </div>

        <!-- Upload Inspiration Images -->
        <div class="md:col-span-2 mt-6">
          <label for="inspiration-upload" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Upload your style inspiration (optional)</label>
          <div class="flex justify-center items-center h-48 sm:h-56 border-2 border-dashed border-gray-300 rounded-xl shadow-neumorphic-inset-light p-4 dark:border-gray-600 dark:shadow-neumorphic-inset-dark">
            <div class="text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8c0 4.418-4.477 8-10 8H12M28 8a4 4 0 00-4-4H12a4 4 0 00-4 4m20 0v12m4-8h-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                <label for="inspiration-upload" class="relative cursor-pointer font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
                  <span>Upload a file</span>
                  <input id="inspiration-upload" name="inspiration-upload" type="file" class="sr-only">
                </label>
                or drag and drop
              </p>
              <p class="text-xs text-gray-500 dark:text-gray-500">PNG, JPG, GIF up to 10MB</p>
            </div>
          </div>
        </div>

        <!-- Newsletter Opt-in Toggle -->
        <div class="col-span-full mt-6">
           <div class="flex items-center justify-between py-3 px-4 rounded-xl shadow-neumorphic-light text-gray-700 dark:bg-gray-800 dark:shadow-neumorphic-dark transition-all duration-200">
            <span class="text-base font-medium dark:text-gray-200">Receive personalized fashion tips</span>
            <label for="newsletter-toggle" class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" id="newsletter-toggle" name="newsletter-optin" value="true" class="sr-only peer">
              <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 dark:bg-gray-600 transition-all duration-200">
              </div>
            </label>
          </div>
        </div>

      </div>

      <!-- Submit Button -->
      <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-700 flex justify-center">
        <button type="submit" class="w-full sm:w-auto px-8 py-4 rounded-full text-lg font-semibold text-white bg-indigo-500 shadow-neumorphic-button-light hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-200 focus:ring-indigo-500 dark:bg-indigo-700 dark:shadow-neumorphic-button-dark dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800 dark:focus:ring-indigo-700 transition-all duration-200">
          Update Profile
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  /* Custom Tailwind CSS Shadow Utilities for Neumorphism */
  /* Light Mode Shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-light-xl {
    box-shadow: 10px 10px 20px #a3a3a3, -10px -10px 20px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-active-light {
    box-shadow: inset 3px 3px 6px #b0b0b0, inset -3px -3px 6px #ffffff;
  }
  .shadow-neumorphic-button-light {
    box-shadow: 6px 6px 12px rgba(99, 102, 241, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.7);
  }

  /* Dark Mode Shadows */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #262626;
  }
  .dark .shadow-neumorphic-dark-xl {
    box-shadow: 10px 10px 20px #3d3d3d, -10px -10px 20px #2f2f2f;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #262626;
  }
  .dark .shadow-neumorphic-active-dark {
    box-shadow: inset 3px 3px 6px #4a4a4a, inset -3px -3px 6px #262626;
  }
   .dark .shadow-neumorphic-button-dark {
    box-shadow: 6px 6px 12px rgba(67, 56, 202, 0.5), -6px -6px 12px rgba(118, 97, 246, 0.4);
  }

  /* Custom styling for multiselect to hide default arrow on some browsers */
  select[multiple]::-ms-expand {
    display: none;
  }
  select[multiple] {
    -webkit-appearance: none; /* For WebKit browsers */
    -moz-appearance: none;    /* For Gecko browsers */
    appearance: none;         /* Standard property */
  }

</style>

Gaming_Material_Form

A responsive gaming-themed form inspired by Material Design principles, featuring triadic colors, depth effects, and dark mode support. Suitable for login, registration, or game settings.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-orange-400 dark:from-gray-900 dark:via-purple-900 dark:to-teal-900 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden
              p-6 sm:p-8 lg:p-10 border-t-4 border-purple-600 dark:border-pink-500 transform hover:scale-105">

    <div class="text-center mb-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-2 tracking-tight drop-shadow-md">
        <span class="text-purple-700 dark:text-pink-500">Gamer</span> Login
      </h2>
      <p class="text-gray-600 dark:text-gray-400 text-md sm:text-lg">Enter the Arena!</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
        <div class="relative">
          <input type="text" id="username" name="username" placeholder="PlayerOne" required
                 class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 block
                       dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 placeholder-gray-500 text-gray-900
                       transition duration-200 ease-in-out transform hover:scale-[1.01] focus:ring-2 focus:outline-none">
          <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4h-3a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4H7a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4h-3" />
          </svg>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
        <div class="relative">
          <input type="password" id="password" name="password" placeholder="********" required
                 class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-pink-500 focus:border-pink-500 block
                       dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 placeholder-gray-500 text-gray-900
                       transition duration-200 ease-in-out transform hover:scale-[1.01] focus:ring-2 focus:outline-none">
         <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14H4a2 2 0 01-2-2V8a2 2 0 012-2h4" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 10h4a2 2 0 012 2v4a2 2 0 01-2 2h-4" />
          </svg>
        </div>
      </div>

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

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-orange-400 dark:hover:text-amber-300 transition-colors duration-200">
            Forgot Password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-lg text-lg sm:text-xl font-bold text-white
                       bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600
                       dark:from-pink-500 dark:to-orange-400 dark:hover:from-pink-600 dark:hover:to-orange-500
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-orange-400
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95
                       animate-pulse-on-hover">
          Level Up!
        </button>
      </div>
    </form>

    <div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Don't have an account? 
      <a href="#" class="font-medium text-orange-500 hover:text-orange-400 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200">
        Sign Up for Adventure!
      </a>
    </div>

  </div>
</div>

A simple, minimalist form component designed with Swiss/International Typography principles, using a muted color scheme suitable for documentation or wiki sites. It is fully responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-xl mx-auto bg-white dark:bg-gray-850 shadow-md rounded-lg overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Contact Us</h2>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">We'd love to hear from you. Please fill out the form below.</p>
    </div>
    <form class="px-6 py-6 space-y-5">
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
        <div class="mt-1">
          <input type="text" name="full-name" id="full-name" autocomplete="name" placeholder="John Doe" class="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 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required placeholder="[email protected]" class="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 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
        <div class="mt-1">
          <input type="text" name="subject" id="subject" placeholder="Inquiry about a topic" class="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 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Your Message</label>
        <div class="mt-1">
          <textarea id="message" name="message" rows="5" placeholder="Type your message here..." class="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 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm"></textarea>
        </div>
      </div>

      <div class="pt-2">
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900">
          Send Message
        </button>
      </div>
    </form>
  </div>
</div>

Photography_Contact_Form

A clean, minimalist contact form for photography portfolios, inspired by Swiss/International Typography, featuring a muted retro/vintage color palette. Fully responsive with dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 space-y-6">
    <div>
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 tracking-tight leading-tight">
        Contact Photographer
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
        Get in touch for bookings or inquiries.
      </p>
    </div>
    <form class="space-y-6" action="#" method="POST">
      <div>
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Name
        </label>
        <div class="mt-1">
          <input id="name" name="name" type="text" autocomplete="name" 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 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
        </div>
      </div>
      <div>
        <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Email address
        </label>
        <div class="mt-1">
          <input id="email-address" 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 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
        </div>
      </div>
      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Message
        </label>
        <div class="mt-1">
          <textarea id="message" name="message" rows="4" required class="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 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm"></textarea>
        </div>
      </div>
      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-gray-800 transition duration-150 ease-in-out">
          Send Message
        </button>
      </div>
    </form>
  </div>
</div>

Minimalist Jewel Tone Government Form

A responsive, minimalist form component for government or public service websites, featuring jewel tones and dark mode support. It includes fields for personal information, contact details, and a message.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="px-6 py-8 md:px-8 bg-gradient-to-r from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Submit Your Inquiry</h2>
      <p class="text-sm sm:text-base opacity-90">Please fill out the form below with accurate information. All fields are required unless otherwise noted.</p>
    </div>

    <form class="p-6 md:p-8 space-y-6 text-gray-800 dark:text-gray-200">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label for="first_name" class="block text-sm font-medium mb-1">First Name</label>
          <input type="text" id="first_name" name="first_name" placeholder="John" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
        </div>
        <div>
          <label for="last_name" class="block text-sm font-medium mb-1">Last Name</label>
          <input type="text" id="last_name" name="last_name" placeholder="Doe" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
        </div>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium mb-1">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <div>
        <label for="phone" class="block text-sm font-medium mb-1">Phone Number (Optional)</label>
        <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <div>
        <label for="subject" class="block text-sm font-medium mb-1">Subject of Inquiry</label>
        <select id="subject" name="subject" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out">
          <option value="" disabled selected>Select a subject</option>
          <option value="general_inquiry">General Inquiry</option>
          <option value="technical_support">Technical Support</option>
          <option value="feedback">Feedback</option>
          <option value="report_issue">Report an Issue</option>
          <option value="other">Other</option>
        </select>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium mb-1">Your Message</label>
        <textarea id="message" name="message" rows="5" placeholder="Provide details about your inquiry..." required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500 resize-y"></textarea>
      </div>

      <div class="flex items-center space-x-2">
        <input type="checkbox" id="terms" name="terms" required class="h-5 w-5 text-emerald-600 dark:text-emerald-500 focus:ring-emerald-500 dark:focus:ring-emerald-400 border-gray-300 dark:border-gray-600 rounded">
        <label for="terms" class="text-sm">I agree to the <a href="#" class="text-emerald-600 dark:text-emerald-500 hover:underline">terms and conditions</a>.</label>
      </div>

      <div class="flex justify-end">
        <button type="submit" class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-semibold rounded-md shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-emerald-500 dark:focus:ring-emerald-600 focus:ring-opacity-50">
          Submit Inquiry
        </button>
      </div>
    </form>
  </div>
</div>

Brutalist Grayscale Industrial Form

A complex, brutalist-style form component with a grayscale color scheme, designed for industrial and manufacturing applications. Features high-contrast elements, unusual layouts, and full responsiveness with dark mode support.

Open Preview

                <div class="min-h-screen bg-neutral-100 dark:bg-neutral-950 p-4 sm:p-8 font-mono text-neutral-900 dark:text-neutral-50 flex items-start justify-center">
  <div class="w-full max-w-6xl border-4 border-neutral-900 dark:border-neutral-50 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] grid md:grid-cols-3 overflow-hidden">

    <!-- Left Section: Header Block -->
    <div class="md:col-span-1 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 p-6 sm:p-8 border-b-4 md:border-b-0 md:border-r-4 border-neutral-900 dark:border-neutral-50">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tighter uppercase mb-4 leading-none">MANUFACTURING OPS. DATA INPUT.</h1>
      <p class="text-sm sm:text-base mb-6 border-b-2 border-neutral-50 dark:border-neutral-900 pb-2">RECORD AND MONITOR PRODUCTION FLOW, MACHINE STATUS, AND QUALITY CONTROL METRICS.</p>
      <div class="space-y-4">
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 10.586V6z" clip-rule="evenodd"></path></svg>
          <span class="text-xs sm:text-sm font-semibold">UTC+00:00 - 15:30:45</span>
        </div>
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><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 class="text-xs sm:text-sm font-semibold">PLANT_A_UNIT_07 - ZONE 3B</span>
        </div>
      </div>
      <img src="https://picsum.photos/300/200?grayscale&random=1" alt="Industrial machinery" class="w-full h-auto mt-8 border-4 border-neutral-50 dark:border-neutral-900 object-cover" style="image-rendering: pixelated;">
    </div>

    <!-- Right Section: Form Fields -->
    <div class="md:col-span-2 p-6 sm:p-8 bg-neutral-100 dark:bg-neutral-950 ">
      <form class="space-y-6 sm:space-y-8">

        <!-- Production Data Section -->
        <div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">PRODUCTION DATA</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div>
              <label for="batch-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Batch ID:</label>
              <input type="text" id="batch-id" placeholder="BCH-731-X" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="product-code" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Product Code:</label>
              <input type="text" id="product-code" placeholder="PRD-A-04" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="quantity-produced" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Quantity Produced:</label>
              <input type="number" id="quantity-produced" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div class="lg:col-span-3">
              <label for="operator-notes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Operator Notes:</label>
              <textarea id="operator-notes" rows="3" placeholder="Add any relevant observations or incidents..." class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm"></textarea>
            </div>
          </div>
        </div>

        <!-- Machine Status Section -->
        <div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">MACHINE STATUS</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
            <div>
              <label for="machine-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Machine ID:</label>
              <select id="machine-id" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
                <option value="">SELECT MACHINE</option>
                <option value="MCH-001">CNC MILL 001</option>
                <option value="MCH-002">LASER CUTTER 002</option>
                <option value="MCH-003">ROBOTIC ARM 003</option>
              </select>
            </div>
            <div>
              <label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Status:</label>
              <div class="flex flex-wrap gap-x-4 gap-y-2 text-sm">
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="operational" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Operational</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="maintenance" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Maintenance</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="error" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Error</span>
                </label>
              </div>
            </div>
            <div>
              <label for="downtime-minutes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Downtime (min):</label>
              <input type="numbeer" id="downtime-minutes" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="last-maintenance" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Last Maintenance:</label>
              <input type="date" id="last-maintenance" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
          </div>
        </div>

        <!-- Quality Control Section -->
        <div>
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">QUALITY CONTROL</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
            <div>
              <label for="defects-reported" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Defects Reported:</label>
              <input type="number" id="defects-reported" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="inspection-result" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Inspection Result:</label>
              <select id="inspection-result" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
                <option value="">SELECT OUTCOME</option>
                <option value="pass">PASS</option>
                <option value="fail">FAIL</option>
                <option value="review">PENDING REVIEW</option>
              </select>
            </div>
            <div class="md:col-span-2">
              <label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Attached Documents:</label>
              <div class="flex flex-wrap gap-x-4 gap-y-2 text-sm mt-1">
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-img" value="img-report" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Image Report</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-spec" value="spec-sheet" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Spec Sheet</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-log" value="test-log" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Test Log</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- Submission & Control -->
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-end pt-4 border-t-2 border-neutral-400 dark:border-neutral-700">
          <span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 sm:mb-0">FORM VERSION 2.1.b / ENGAGE PROTOCOL 7-ALPHA</span>
          <button type="submit" class="px-8 py-3 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 font-bold uppercase border-2 border-neutral-900 dark:border-neutral-50 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] hover:shadow-none transition-all duration-150 ease-in-out text-sm sm:text-base tracking-widest">
            SUBMIT DATA
          </button>
        </div>

      </form>
    </div>

  </div>
</div>

Skeuomorphic_Social_Media_Form_Complex

A complex, skeuomorphic social media form component with complementary colors, responsive design, and dark mode support. Mimics real-world button feels and textures.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-t border-gray-50 border-solid dark:border-gray-700/50 p-6 sm:p-8 lg:p-10 flex flex-col gap-8 transition-all duration-300 ease-in-out">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-200 text-center drop-shadow-md tracking-tight">
      Connect and Share
    </h2>

    <!-- Post Creation Section -->
    <section class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative">
      <div class="absolute inset-0 rounded-2xl pointer-events-none"
           style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                      radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

      <div class="flex items-start gap-4 mb-4">
        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transform translate-z-0">
        <textarea placeholder="What's on your mind, Sarah?" class="flex-1 text-lg p-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition duration-200 appearance-none" rows="4" style="resize: none;"></textarea>
      </div>

      <div class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6">
        <div class="flex flex-wrap gap-3">
          <button class="flex items-center gap-2 p-3 rounded-full bg-blue-300 hover:bg-blue-400 active:bg-blue-500 text-blue-900 dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-gray-100 font-semibold shadow-md shadow-blue-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-blue-400 dark:border-blue-700 relative overflow-hidden group">
            <div class="inset-0 absolute rounded-full bg-gradient-to-t from-blue-400 to-blue-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-blue-700 dark:to-blue-500"></div>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5c0-.55-.45-1-1-1H5a1 1 0 00-1 1v7.586l3.293-3.293a1 1 0 011.414 0L9 11l3.293-3.293a1 1 0 011.414 0L15 10.586V5h-.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L14 13.586V5H6v8.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L4 12.586V5h-.586L2 7V5c0-.55.45-1 1-1h13zm-1 9.586L13.586 12 12 13.586l-2-2-1.414 1.414L8 15.586V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.586zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.414zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h9.586L13 13.586z" clip-rule="evenodd" /></svg>
            <span class="relative z-10">Photo/Video</span>
          </button>
          <button class="flex items-center gap-2 p-3 rounded-full bg-pink-300 hover:bg-pink-400 active:bg-pink-500 text-pink-900 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:bg-pink-800 dark:text-gray-100 font-semibold shadow-md shadow-pink-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-pink-400 dark:border-pink-700 relative overflow-hidden group">
            <div class="inset-0 absolute rounded-full bg-gradient-to-t from-pink-400 to-pink-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-pink-700 dark:to-pink-500"></div>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" /></svg>
            <span class="relative z-10">Feeling/Activity</span>
          </button>
        </div>
        <button type="submit" class="px-8 py-3 rounded-full text-xl font-bold bg-green-500 hover:bg-green-600 active:bg-green-700 text-white dark:bg-green-700 dark:hover:bg-green-800 dark:active:bg-green-900 shadow-xl shadow-green-600/40 dark:shadow-none active:shadow-inner active:shadow-green-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-green-700 dark:border-green-900 relative overflow-hidden group">
          <div class="inset-0 absolute rounded-full bg-gradient-to-t from-green-600 to-green-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-green-800 dark:to-green-600"></div>
          <span class="relative z-10">Post</span>
        </button>
      </div>
    </section>

    <!-- Advanced Settings / Privacy Section -->
    <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
          <div class="absolute inset-0 rounded-2xl pointer-events-none"
               style="background: radial-gradient(circle at top right, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                          radial-gradient(circle at bottom left, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

        <h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Audience Settings</h3>
        <div class="mb-4">
          <label for="audience" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can see your post?</label>
          <div class="relative">
            <select id="audience" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
              <option value="public">Public</option>
              <option value="friends">Friends</option>
              <option value="private">Only Me</option>
              <option value="custom">Custom</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
            </div>
          </div>
        </div>

        <div>
          <label for="comments" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can comment?</label>
          <div class="relative">
            <select id="comments" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
              <option value="anyone">Anyone</option>
              <option value="friends">Friends</option>
              <option value="mentions">Only Mentions</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
          <div class="absolute inset-0 rounded-2xl pointer-events-none"
               style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                          radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

        <h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Advanced Options</h3>
        <div class="flex items-center justify-between mb-4">
          <span class="text-gray-700 dark:text-gray-300">Enable notifications</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
        <div class="flex items-center justify-between mb-4">
          <span class="text-gray-700 dark:text-gray-300">Save as draft</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-gray-700 dark:text-gray-300">Enable location tagging</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
      </div>
    </section>

    <!-- Call to action/secondary actions -->
    <div class="flex flex-col sm:flex-row gap-4 justify-end mt-4">
      <button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-gray-300 hover:bg-gray-400 active:bg-gray-500 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500 dark:text-gray-200 shadow-md shadow-gray-400/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-gray-400 dark:border-gray-600 relative overflow-hidden group">
        <div class="inset-0 absolute rounded-full bg-gradient-to-t from-gray-400 to-gray-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-gray-700 dark:to-gray-500"></div>
        <span class="relative z-10">Cancel</span>
      </button>
      <button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 text-white dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:active:bg-indigo-900 shadow-xl shadow-indigo-600/40 dark:shadow-none active:shadow-inner active:shadow-indigo-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-indigo-700 dark:border-indigo-900 relative overflow-hidden group">
        <div class="inset-0 absolute rounded-full bg-gradient-to-t from-indigo-600 to-indigo-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-indigo-800 dark:to-indigo-600"></div>
        <span class="relative z-10">Save Draft</span>
      </button>
    </div>
  </div>
</div>

Glassmorphism Forms Component

Glassmorphism Forms Component with Earth tones, responsive design, and dark theme support for a blog/content website.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-8 w-full max-w-md border border-stone-200 dark:border-stone-700">
    <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200 mb-6 text-center">Contact Us</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Name</label>
        <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-6">
        <label for="message" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Message</label>
        <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400"></textarea>
      </div>
      <button type="submit" class="w-full bg-stone-700 dark:bg-stone-600 text-white py-3 rounded-lg font-semibold hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-stone-400">
        Send Message
      </button>
    </form>
  </div>
</div>

Brutalist Social Media Form

A simple, brutalist form component for social media with triadic color scheme and dark theme support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-brutalism p-6 max-w-md w-full"><h2 class="text-2xl md:text-3xl font-bold mb-6 text-black dark:text-white uppercase tracking-wider">Share Your Thoughts</h2><form><div class="mb-4"><label for="post-content" class="block text-black dark:text-white text-sm font-bold mb-2">What's on your mind?</label><textarea id="post-content" rows="4" class="block w-full px-3 py-2 text-black dark:text-white bg-yellow-300 dark:bg-yellow-700 border-2 border-black dark:border-white focus:outline-none focus:ring-0 focus:border-red-500 dark:focus:border-red-400 placeholder-black dark:placeholder-gray-300"></textarea></div><div class="mb-4"><label for="tags" class="block text-black dark:text-white text-sm font-bold mb-2">Tags (comma-separated):</label><input type="text" id="tags" class="block w-full px-3 py-2 text-black dark:text-white bg-purple-400 dark:bg-purple-700 border-2 border-black dark:border-white focus:outline-none focus:ring-0 focus:border-red-500 dark:focus:border-red-400 placeholder-black dark:placeholder-gray-300"></div><button type="submit" class="w-full bg-red-500 dark:bg-red-600 text-white dark:text-black font-bold py-3 px-4 border-2 border-black dark:border-white active:bg-red-700 dark:active:bg-red-800 uppercase tracking-wider">Post</button></form></div></div>

Brutalist Forms Component

A simple brutalist-styled forms component for social media. It features a high contrast, raw design using grayscale colors and is responsive with dark mode support.

Open Preview

                <div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Sign Up</h2>
    <form>
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
        <input type="text" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Name" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Email" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
        <div class="flex items-center mb-4">
            <img src="https://picsum.photos/50" alt="Profile Picture" class="rounded-full border border-gray-300 dark:border-gray-600 mr-3">
            <input type="file" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded"> 
        </div>
        
        <button type="submit" class="w-full py-2 bg-gray-900 dark:bg-gray-200 text-white dark:text-gray-900 hover:bg-gray-700 dark:hover:bg-gray-300 rounded">Submit</button>
    </form>
</div>