CCHub Logo CCHub Tailwind Collection
コンポーネント 検索ボックス マテリアルデザイン検索ボックス

マテリアルデザイン検索ボックス

マテリアル デザインの原則に触発された検索ボックス コンポーネントで、Tailwind CSS を使用して構築されています。コンテナの幅に適応するレスポンシブ動作、ホバーとフォーカスのシャドウトランジション(深度効果)による視覚的なフィードバック、および包括的なダークテーマのサポートを特徴としています。このコンポーネントには、主要な検索アイコンが含まれており、すっきりとしたモダンな美学を保証します。CSS のみの実装。その「w-full」の性質により、さまざまなレイアウトに埋め込むのに最適です。アクセシビリティのために、'input' 要素と対応する '<label>' を組み合わせるか、説明的な 'aria-label' を提供してください。

プレビュー

HTMLコード 

<!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
  <div class="pl-4 pr-2 py-3">
    <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input
    type="search"
    name="search_query"
    id="material_search_box_input"
    placeholder="Search..."
    aria-label="Search"
    class="
      appearance-none
      w-full h-12
      pl-0 pr-4 py-3
      text-base text-gray-900 dark:text-gray-100
      bg-transparent
      focus:outline-none
      placeholder-gray-500 dark:placeholder-gray-400
    "
  />
</div>
<!-- Component End -->

関連コンポーネント

シンプルな3Dパステル検索ボックス

3D のようなデザイン、パステルカラーの配色、ダークテーマのサポートを備えたレスポンシブ検索ボックス コンポーネントで、ブログ/コンテンツ Web サイト用に Tailwind CSS で構築されています。

開ける

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

マテリアルデザインの原則に基づいて設計されたレスポンシブ検索ボックスコンポーネントで、Tailwind CSSスタイルとダークテーマのサポートが特徴です。

開ける

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

パステルカラーの配色、複数のインタラクティブ要素を備えた複雑なインターフェイスを備えたミニマリストでフラットなデザインの検索ボックスコンポーネントで、作品や製品を展示するポートフォリオ用に設計されています。

開ける