検索コンポーネント

カテゴリ

検索ボックス

ユーザーがウェブサイトのコンテンツを検索できるようにする

Industrial_Candy_SearchBox

工業的でありながらキャンディー色の美学を備えた、適度に複雑でレスポンシブな検索ボックスコンポーネントで、プロフェッショナルな企業Webサイト向けに設計されており、ダークモードのサポートを備えています。

                <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

キャンディー/スウィートカラーのレスポンシブ3Dインスパイアされた検索ボックスコンポーネントで、製造/工業用途に適しており、微妙な影の効果とインタラクティブな要素が特徴です。

開けるプレビュー

                <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

バウハウスの原則、セピア/ブラウンの色調、およびダークモードのサポートで設計された、農業/農業Webサイト用のレスポンシブ検索ボックスコンポーネント。

開けるプレビュー

                <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

エレクトリックブルーとホットピンクを特徴とするネオングローエフェクトを備えたシンプルでレスポンシブな検索ボックスコンポーネントで、ダークモードのサポートを含むテクノロジー/ SaaSアプリケーション向けです。

開けるプレビュー

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

オーガニックな自然にインスパイアされた検索ボックス

有機的で自然にインスパイアされたデザインと虹色のグラデーションを備えたシンプルでレスポンシブな検索ボックスコンポーネントで、ビジネスや企業のWebサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

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

ゲーム検索ボックスコンポーネント

バウハウスのデザイン原則に触発された、ゲームWebサイト用のレスポンシブでシンプルな検索ボックスコンポーネントで、フォレスト/グリーンのカラーパレットとダークモードがサポートされています。

開けるプレビュー

                <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

気象および気候データ用の複雑で高コントラストのブルータリズムスタイルの検索ボックスコンポーネントで、複数の入力要素とダークモードをサポートするレスポンシブデザインを備えています。

開けるプレビュー

                <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

食品/レストランの Web サイト向けのレスポンシブでコントラストの高いインダストリアルスタイルの検索ボックスコンポーネントで、露出要素、ダークモードのサポート、適度な複雑さが特徴です。

開けるプレビュー

                <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

スキューモーフィックなデザイン、鮮やかな配色、ダークモードをサポートする完全な応答性を備えた、中程度の複雑さの検索ボックスコンポーネントで、ブログ/コンテンツサイトに適しています。

開けるプレビュー

                <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 検索ボックスコンポーネント

グレースケールカラーのレスポンシブglassmorphismスタイルの検索ボックスコンポーネントで、ブログやコンテンツサイトに適しており、すりガラスのような半透明の入力とボタンを備えています。ダークモードのサポートが含まれています。

開けるプレビュー

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