CCHub Logo CCHub Tailwind Collection
コンポーネント 検索ボックス Glassmorphism検索ボックス

Glassmorphism検索ボックス

ダッシュボードに適した、グレースケールカラーのシンプルでレスポンシブなglassmorphism検索ボックスコンポーネント。ダークモードをサポートします。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md">
    <input type="text" placeholder="Search..." class="w-full py-3 px-5 pr-12 rounded-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 transition duration-300 ease-in-out"
    />
    <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
      <svg class="h-5 w-5 text-gray-600 dark:text-gray-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>

関連コンポーネント

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

ダークモードのサポートと補色の配色を備えたソーシャルメディアインターフェイス用に設計されたシンプルな検索ボックスコンポーネント。

開ける

Skeuomorphic_Vibrant_Search_Box_Component

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

開ける

Industrial_Candy_SearchBox

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

開ける