Search Components

Search Box

Allows users to search website content

Industrial_Candy_SearchBox

A moderately complex, responsive search box component with an industrial yet candy-colored aesthetic, designed for professional corporate websites, featuring dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden border-2 border-violet-400 dark:border-zinc-700 transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 md:p-10 border-b-2 border-violet-300 dark:border-zinc-700 flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-violet-700 dark:text-pink-400 uppercase tracking-wide">Search Portal</h2>
      <svg class="h-6 w-6 sm:h-8 sm:w-8 text-violet-500 dark:text-pink-300 transform rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </div>

    <div class="p-6 sm:p-8 md:p-10 space-y-6">
      <div class="relative">
        <input type="text" placeholder="Search for products, services, or pages..." class="w-full p-4 pl-12 pr-4 rounded-full border-2 border-pink-400 dark:border-pink-600 bg-pink-50 dark:bg-zinc-900 text-violet-900 dark:text-gray-100 placeholder-violet-400 dark:placeholder-pink-400 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 transition-all duration-200 ease-in-out text-base sm:text-lg font-medium shadow-inner">
        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
          <svg class="h-6 w-6 text-pink-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <select class="w-full p-3 pl-4 rounded-lg border-2 border-green-400 dark:border-green-600 bg-green-50 dark:bg-zinc-900 text-violet-900 dark:text-gray-100 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transition-all duration-200 ease-in-out text-sm sm:text-base cursor-pointer">
          <option>All Categories</option>
          <option>Solutions</option>
          <option>Industries</option>
          <option>Resources</option>
          <option>About Us</option>
        </select>
        <select class="w-full p-3 pl-4 rounded-lg border-2 border-cyan-400 dark:border-cyan-600 bg-cyan-50 dark:bg-zinc-900 text-violet-900 dark:text-gray-100 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-700 transition-all duration-200 ease-in-out text-sm sm:text-base cursor-pointer">
          <option>Latest Records</option>
          <option>Most Relevant</option>
          <option>Alphabetical A-Z</option>
          <option>Date Ascending</option>
        </select>
      </div>

      <div class="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 sm:pt-6">
        <button class="w-full sm:w-auto px-8 py-3 rounded-full bg-violet-500 text-white dark:bg-pink-600 dark:text-white font-bold uppercase tracking-wider text-base sm:text-lg hover:bg-violet-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-4 focus:ring-violet-300 dark:focus:ring-pink-500 transition-all duration-200 ease-in-out shadow-lg transform hover:scale-105">
          Apply Search
        </button>
        <button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-gray-300 dark:border-zinc-600 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-700 font-semibold text-sm sm:text-base hover:bg-gray-200 dark:hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-zinc-500 transition-all duration-200 ease-in-out">
          Clear Filters
        </button>
      </div>
    </div>

    <div class="p-6 sm:p-8 md:p-10 border-t-2 border-violet-300 dark:border-zinc-700 text-center text-sm text-gray-500 dark:text-gray-400">
      <p>Powered by <a href="#" class="text-violet-600 dark:text-pink-400 hover:underline">Corporate Solutions Inc.</a></p>
    </div>
  </div>
</div>

3D_Candy_SearchBox_Manufacturing

A responsive 3D-inspired search box component with candy/sweet colors, suitable for manufacturing/industrial applications, featuring a subtle shadow effect and interactive elements.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans">
  <div class="relative w-full max-w-md mx-auto">
    <div class="absolute -inset-1 bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400 rounded-3xl blur-xl opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt dark:from-pink-600 dark:via-purple-600 dark:to-blue-600"></div>
    <div class="relative p-6 rounded-3xl shadow-xl bg-white dark:bg-gray-800 border border-t-pink-200 border-l-purple-200 border-b-blue-200 border-r-green-200 dark:border-t-pink-700 dark:border-l-purple-700 dark:border-b-blue-700 dark:border-r-green-700 transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-pink-600 dark:text-pink-400 tracking-tight leading-tight drop-shadow-sm">Find Your <span class="text-purple-600 dark:text-purple-400">Components</span></h2>
      <div class="relative flex items-center w-full shadow-inner rounded-full bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-blue-600 transition-all duration-300 focus-within:shadow-xl focus-within:ring-2 focus-within:ring-purple-300 focus-within:border-purple-400 dark:focus-within:ring-purple-700 dark:focus-within:border-purple-500">
        <svg class="h-6 w-6 ml-4 text-purple-400 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        <input type="text" placeholder="Search for parts, models, or documentation..." class="flex-grow py-3 px-4 text-lg bg-transparent border-none outline-none placeholder-blue-300 dark:placeholder-gray-500 text-gray-800 dark:text-gray-100 rounded-full pr-12" aria-label="Search for components">
        <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-lg sm:hover:from-pink-600 sm:hover:to-purple-600 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300 dark:focus:ring-pink-700" aria-label="Initiate search">
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8c1.332 0 2.593-.576 3.49-1.576l4.053 4.054a1 1 0 001.414-1.414l-4.053-4.054C13.576 10.593 13 9.332 13 8a5 5 0 00-10 0zM12 8a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
      <p class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
        Need assistance? <a href="#" class="text-purple-600 dark:text-purple-400 font-semibold hover:underline transition-colors duration-200">Contact support</a> or browse our <a href="#" class="text-blue-600 dark:text-blue-400 font-semibold hover:underline transition-colors duration-200">knowledge base</a>.
      </p>
    </div>
  </div>
</div>

Bauhaus_Agriculture_Search_Box

Responsive search box component for agriculture/farming websites, designed with Bauhaus principles, sepia/brown tones, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 border-b border-amber-200 dark:border-stone-700 font-sans">
  <div class="max-w-4xl mx-auto py-4 sm:py-6 md:py-8 bg-amber-100 dark:bg-stone-800 shadow-lg rounded-lg overflow-hidden border-2 border-amber-300 dark:border-stone-700">
    <div class="px-5 py-4 sm:px-6 sm:py-5 flex flex-col sm:flex-row items-center justify-between">
      <h2 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 sm:mb-0 text-center sm:text-left tracking-wider uppercase">
        Field Finder
      </h2>
      <div class="relative w-full sm:w-auto flex-grow max-w-md">
        <input type="text" placeholder="Search crops, fields, or equipment..." class="w-full py-3 pl-12 pr-4 rounded-full bg-amber-50 dark:bg-stone-700 text-stone-700 dark:text-stone-200 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300 border border-amber-300 dark:border-stone-600 shadow-inner text-base sm:text-lg transition-all duration-300 ease-in-out">
        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-stone-500 dark:text-stone-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 px-5 py-4 sm:px-6 sm:py-5 border-t border-amber-200 dark:border-stone-700">
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600 shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 012.707 13H3a1 1 0 000-2H2.707L3 10.707V8a7 7 0 0114 0v2.707l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a6 6 0 00-6-6zM5 16a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"></path></svg>
        Plots
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a1 1 0 00-1-1H4a1 1 0 00-1 1v.586L2.707 9.707A1 1 0 012.707 11H3a1 1 0 100-2h.293l-.707-.707V8a2 2 0 012-2h2zm0 6a2 2 0 100 4h8a2 2 0 100-4H6z" clip-rule="evenodd"></path></svg>
        Crops
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM10 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM13 3a1 1 0 00-2 0v1a1 1 0 002 0V3z"></path><path fill-rule="evenodd" d="M3 8a3 3 0 013-3h8a3 3 0 013 3v7a3 3 0 01-3 3H6a3 3 0 01-3-3V8zm5-1a1 1 0 000 2h4a1 1 0 100-2H8zm-1 3a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
        Equipment
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.5 1V.5a.5.5 0 011 0V1A5.5 5.5 0 007 6.5h6A5.5 5.5 0 0018.5 1V.5a.5.5 0 011 0V1a6.5 6.5 0 01-6.5 6.5H7A6.5 6.5 0 01.5 1zM2 11.5a1 1 0 112 0 1 1 0 01-2 0zm14 0a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path><path d="M11 5H9a1 1 0 00-1 1v3a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1zm3 11a1 1 0 100-2 1 1 0 000 2zm-8 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
        Weather
      </button>
    </div>
  </div>
</div>

Neon_Glow_Search_Box

A simple, responsive search box component with neon glow effects featuring electric blue and hot pink for Technology/SaaS applications, including dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-900 min-h-screen flex items-center justify-center dark:bg-gray-950">
  <div class="w-full max-w-lg">
    <div class="relative flex items-center w-full max-w-md mx-auto rounded-full shadow-lg dark:shadow-xl group transition-all duration-300 ease-in-out
                bg-gradient-to-r from-gray-800 to-gray-900 border border-gray-700
                dark:from-gray-900 dark:to-black dark:border-gray-800
                focus-within:border-blue-500 focus-within:shadow-blue-500/50 dark:focus-within:border-pink-500 dark:focus-within:shadow-pink-500/50">

      <!-- Neon Glow Border Effect -->
      <div class="absolute inset-0 rounded-full blur-sm opacity-0 group-hover:opacity-60 dark:group-hover:opacity-70
                  bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-600 dark:via-purple-600 dark:to-pink-600
                  transition-opacity duration-500 ease-in-out"></div>
      <div class="absolute inset-0 rounded-full blur-md opacity-0 group-hover:opacity-40 dark:group-hover:opacity-50
                  bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 dark:from-blue-500 dark:via-purple-500 dark:to-pink-500
                  transition-opacity duration-500 ease-in-out delay-100"></div>
      <div class="absolute inset-0 rounded-full blur-lg opacity-0 group-hover:opacity-20 dark:group-hover:opacity-30
                  bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
                  transition-opacity duration-500 ease-in-out delay-200"></div>

      <!-- Inner content and input -->
      <div class="relative z-10 flex items-center w-full rounded-full overflow-hidden">
        <input type="text" placeholder="Search for anything..." class="flex-grow py-3 pl-6 pr-2 text-white bg-transparent outline-none rounded-l-full
                      placeholder-gray-400 dark:placeholder-gray-500
                      font-medium text-lg leading-tight
                      focus:ring-0 appearance-none
                      transition-colors duration-300 ease-in-out
                      dark:text-gray-100">

        <button type="submit" class="flex-shrink-0 p-3 pr-6 rounded-r-full
                        bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700
                        hover:from-blue-700 hover:to-purple-700 dark:hover:from-blue-800 dark:hover:to-purple-800
                        transition-all duration-300 ease-in-out
                        transform hover:scale-105 active:scale-95
                        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-pink-500 dark:focus:ring-offset-gray-900
                        shadow-md hover:shadow-lg dark:shadow-xl
                        group-hover:shadow-blue-500/40 dark:group-hover:shadow-pink-500/40">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Organic Nature-Inspired Search Box

A simple, responsive search box component with an organic, nature-inspired design and a rainbow gradient, suitable for business or corporate websites. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 via-sky-100 to-green-100 dark:from-gray-900 dark:via-blue-950 dark:to-teal-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl bg-white dark:bg-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105">
    <div class="relative p-5 sm:p-6 md:p-8 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-700 dark:via-yellow-700 dark:to-green-700 animate-gradient-xy rounded-t-3xl">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-white text-center drop-shadow-md pb-2">
        Find Your Harmony
      </h2>
      <p class="text-sm sm:text-base text-white text-center opacity-90">
        Explore our natural solutions.
      </p>
    </div>
    <div class="p-5 sm:p-6 md:p-8 relative -top-3 bg-white dark:bg-gray-800 rounded-b-3xl">
      <form class="relative flex items-center">
        <label for="search-input" class="sr-only">Search for products or solutions</label>
        <input
          id="search-input"
          type="text"
          placeholder="Search for products, services..."
          class="w-full py-3 pl-4 pr-12 text-base rounded-full border-2 border-gray-300 dark:border-gray-600 focus:border-green-500 dark:focus:border-green-400 focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 outline-none text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 transition-all duration-200 shadow-inner dark:shadow-none"
          aria-label="Search input field"
        />
        <button
          type="submit"
          class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-gradient-to-br from-green-400 to-blue-500 text-white dark:from-green-600 dark:to-blue-700 hover:from-green-500 hover:to-blue-600 dark:hover:from-green-700 dark:hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-lg"
          aria-label="Search button"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
          </svg>
        </button>
      </form>
      <p class="text-center text-xs text-gray-500 dark:text-gray-400 mt-4">
        <small>Discover nature's finest solutions for your business.</small>
      </p>
    </div>
  </div>
</div>

<style>
/* Define the keyframes for the gradient animation */
@keyframes gradient-xy {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* Apply the animation */
.animate-gradient-xy {
  background-size: 400% 400%; /* Make the background larger than the element */
  animation: gradient-xy 15s ease infinite alternate;
}
</style>

Gaming Search Box Component

A responsive and simple search box component for gaming websites, inspired by Bauhaus design principles with a forest/green color palette and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-lime-50 to-emerald-100 dark:from-stone-900 dark:to-green-950 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-lg bg-green-50 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform skew-y-1 sm:skew-y-0 transition-transform duration-300 ease-in-out border-4 border-green-700 dark:border-green-600">
    <div class="p-4 sm:p-6 lg:p-8 bg-green-700 dark:bg-green-800 flex items-center justify-center relative">
      <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-yellow-300 uppercase transform -skew-y-3 dark:text-lime-300 tracking-wider relative z-10">
        Find Your Game
      </h2>
      <div class="absolute inset-0 bg-gradient-to-r from-green-800 to-emerald-900 opacity-70 dark:opacity-60 z-0"></div>
    </div>
    <div class="p-6 sm:p-8 lg:p-10">
      <form action="#" method="GET" class="relative">
        <label for="search-game" class="sr-only">Search for a game</label>
        <div class="relative flex items-center bg-green-100 dark:bg-stone-700 rounded-md border-2 border-green-400 dark:border-green-600 focus-within:border-emerald-600 dark:focus-within:border-lime-500 transition-colors duration-300">
          <input
            type="search"
            id="search-game"
            name="q"
            placeholder="Search game titles..."
            aria-label="Search for a game"
            class="w-full py-3 pl-4 pr-12 text-lg text-green-900 dark:text-lime-50 placeholder-green-600 dark:placeholder-green-400 bg-transparent outline-none focus:ring-0 rounded-l-md"
            tabindex="0"
          />
          <button
            type="submit"
            aria-label="Perform search"
            class="absolute right-0 top-0 h-full w-12 flex items-center justify-center bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white rounded-r-md transition-colors duration-300 transform -skew-x-6 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-stone-800"
            tabindex="0"
          >
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </button>
        </div>
      </form>
    </div>
    <div class="relative bg-gradient-to-t from-green-700 to-green-600 dark:from-green-900 dark:to-green-800 p-2 sm:p-3 lg:p-4 text-center transform -skew-y-1 sm:skew-y-0 transition-transform duration-300 ease-in-out">
      <p class="text-sm text-yellow-200 dark:text-lime-200 uppercase font-semibold relative z-10 tracking-widest">
        Press Enter to Play
      </p>
       <div class="absolute inset-0 bg-green-800 opacity-50 dark:opacity-40 z-0"></div>
    </div>
  </div>
</div>

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>

Industrial_Food_Search_Box

A responsive and high-contrast industrial-style search box component for food/restaurant websites, featuring exposed elements, dark mode support, and moderate complexity.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 min-h-max flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg border-2 border-gray-300 dark:border-gray-700 overflow-hidden">
    <div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 border-b-2 border-gray-200 dark:border-gray-700">
      <div class="flex-shrink-0 text-gray-700 dark:text-gray-300 mr-0 sm:mr-4 mb-2 sm:mb-0">
        <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <div class="flex-grow w-full">
        <label for="search-food" class="sr-only">Search for food or restaurants</label>
        <input id="search-food" type="text" placeholder=" cravings... pizza, sushi, burgers, pasta" class="w-full p-3 text-base sm:text-lg bg-transparent text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent font-mono tracking-wide" aria-label="Search for food or restaurants">
      </div>
      <button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-md shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-850 flex items-center justify-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        Search
      </button>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-4 gap-px bg-gray-200 dark:bg-gray-700 border-t-2 border-gray-200 dark:border-gray-700">
      <!-- Category 1 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/1080/60/60" alt="Pizza" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Pizza</span>
      </div>
      <!-- Category 2 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/1054/60/60" alt="Sushi" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Sushi</span>
      </div>
      <!-- Category 3 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/111/60/60" alt="Burgers" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Burgers</span>
      </div>
      <!-- Category 4 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/1084/60/60" alt="Desserts" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Desserts</span>
      </div>
    </div>

    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-850 border-t-2 border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
      <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-3 sm:mb-0">
        Explore popular cuisines or filter by location.
      </div>
      <button class="flex items-center px-4 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 text-sm font-semibold rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
        </svg>
        Advanced Filters
      </button>
    </div>
  </div>
</div>

Skeuomorphic_Vibrant_Search_Box_Component

A moderate complexity search box component with a skeuomorphic design, vibrant color scheme, and full responsiveness with dark mode support, suitable for blog/content sites.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto p-4 sm:p-6 bg-gradient-to-br from-violet-200 to-fuchsia-200 dark:from-gray-700 dark:to-gray-900 rounded-2xl shadow-xl border-t-2 border-l-2 border-violet-300 dark:border-gray-600
      flex flex-col gap-4
      relative before:absolute before:inset-0 before:rounded-2xl before:shadow-[inset_0_0_8px_rgba(255,255,255,0.7),inset_0_0_15px_rgba(0,0,0,0.1),0_8px_16px_rgba(0,0,0,0.2)]
      dark:before:shadow-[inset_0_0_8px_rgba(0,0,0,0.6),inset_0_0_15px_rgba(255,255,255,0.05),0_8px_16px_rgba(0,0,0,0.3)]">

    <h2 class="text-center text-3xl font-extrabold text-indigo-800 dark:text-fuchsia-300 mb-4 drop-shadow-md
        relative before:absolute before:-left-2 before:-top-2 before:-bottom-2 before:-right-2 before:rounded-lg before:bg-indigo-300/30 dark:before:bg-gray-800/50 before:backdrop-blur-sm before:z-[-1] before:shadow-md">
      Find Your Inspiration
    </h2>

    <div class="relative z-10">
      <input type="search" placeholder="Search articles, topics or authors..."
        class="w-full py-3 px-5 pr-12 text-lg text-indigo-900 dark:text-gray-100 bg-violet-100 dark:bg-gray-800 rounded-full
               focus:outline-none focus:ring-4 focus:ring-violet-400 dark:focus:ring-fuchsia-500
               shadow-inner-sk place-content-center
               transition-all duration-300 ease-in-out
               border-t border-l border-violet-300 dark:border-gray-700
               relative before:absolute before:inset-0 before:rounded-full before:shadow-[inset_0_0_8px_rgba(0,0,0,0.05),inset_0_0_10px_rgba(255,255,255,0.7)]
               dark:before:shadow-[inset_0_0_8px_rgba(0,0,0,0.3),inset_0_0_10px_rgba(255,255,255,0.05)]">
      <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center
                           bg-gradient-to-br from-pink-500 to-rose-600 dark:from-fuchsia-700 dark:to-purple-900
                           rounded-full shadow-lg hover:from-pink-600 hover:to-rose-700 dark:hover:from-fuchsia-800 dark:hover:to-purple-950
                           transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                           border-b-2 border-r-2 border-pink-700 dark:border-purple-800">
        <svg class="w-6 h-6 text-white stroke-current stroke-[2px] leading-3" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </button>
    </div>

    <div class="flex justify-around mt-4 flex-wrap gap-2">
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-indigo-400 dark:bg-purple-700 text-white shadow-md
                     hover:bg-indigo-500 dark:hover:bg-purple-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-indigo-500 dark:border-purple-800">
        Category 1
      </button>
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-emerald-400 dark:bg-teal-700 text-white shadow-md
                     hover:bg-emerald-500 dark:hover:bg-teal-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-emerald-500 dark:border-teal-800">
        Popular
      </button>
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-amber-400 dark:bg-orange-700 text-white shadow-md
                     hover:bg-amber-500 dark:hover:bg-orange-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-amber-500 dark:border-orange-800">
        New
      </button>
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-cyan-400 dark:bg-sky-700 text-white shadow-md
                     hover:bg-cyan-500 dark:hover:bg-sky-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-cyan-500 dark:border-sky-800">
        Trending
      </button>
    </div>

  </div>
</div>

<style>
/* Additional custom styles for skeuomorphism (optional, can be fully Tailwind with extended config) */
/* This is not strictly necessary but can enhance the depth if Tailwind's box-shadow is not enough */
.shadow-inner-sk {
  box-shadow: inset 0 0 8px rgba(0,0,0,0.05), inset 0 0 10px rgba(255,255,255,0.7);
}
.dark .shadow-inner-sk {
  box-shadow: inset 0 0 8px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.05);
}
</style>

Glassmorphism Search Box Component

A responsive glassmorphism-style search box component with grayscale colors, suitable for blogs or content sites, featuring a frosted glass-like translucent input and button. Includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 duration-300 p-4">
  <div class="w-full max-w-md backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl p-6 shadow-lg border border-white/30 dark:border-gray-700/30 transition-all duration-300 ease-in-out">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center select-none">
      Search Content
    </h3>
    <div class="relative flex items-center w-full">
      <input
        type="text"
        placeholder="Search articles, topics..."
        class="flex-grow py-3 pl-4 pr-12 text-gray-800 dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400 bg-white/40 dark:bg-gray-700/40 border border-white/50 dark:border-gray-600/50 rounded-xl focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-300 transition-all duration-300 ease-in-out shadow-inner placeholder-shown:italic"
      />
      <button
        class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-lg bg-white/60 dark:bg-gray-700/60 text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700 hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-300"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          />
        </svg>
      </button>
    </div>
    <p class="text-xs text-gray-600 dark:text-gray-400 mt-3 text-center select-none">
      Discover new insights and stories.
    </p>
  </div>
</div>