検索コンポーネント

カテゴリ

検索ボックス

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

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

ダークテーマのサポート、アースカラーの配色、最小限のデザインを備えたレスポンシブ検索ボックスコンポーネント。

                <form class="flex items-center w-full max-w-md mx-auto">
  <label for="simple-search" class="sr-only">Search</label>
  <div class="relative w-full">
    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
    </div>
    <input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
  </div>
  <button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
    <svg class="w-5 h-5" 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>
    <span class="sr-only">Search</span>
  </button>
</form>

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

Tailwind CSSを使用したダークモードをサポートするレスポンシブ検索ボックス。

開けるプレビュー

                <form class="flex items-center w-full max-w-md mx-auto">
    <label for="search" class="sr-only">Search</label>
    <div class="relative w-full">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg">
                <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"></path>
            </svg>
        </div>
        <input type="text" id="search"
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-stone-500 focus:border-stone-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-stone-500 dark:focus:border-stone-500"
            placeholder="Search..." required>
    </div>
    <button type="submit"
        class="p-2.5 ml-2 text-sm font-medium text-white bg-stone-700 rounded-lg border border-stone-700 hover:bg-stone-800 focus:ring-4 focus:outline-none focus:ring-stone-300 dark:bg-stone-600 dark:hover:bg-stone-700 dark:focus:ring-stone-800">
        <svg class="w-5 h-5" 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>
</form>

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

ブルータリズムスタイルでデザインされ、パステルカラーの配色で、ソーシャルメディアインターフェース用に調整された複雑な検索ボックスコンポーネント。このコンポーネントには、検索入力、フィルター、送信ボタンなどのインタラクティブな要素が含まれており、すべてダークモードをサポートしています。

開けるプレビュー

                <div class="w-full max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">Search</h2>
    <form class="flex flex-col space-y-4">
        <input type="text" placeholder="Search..." class="p-4 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition duration-200" />
        <div class="flex flex-wrap justify-between">  
            <select class="w-full md:w-auto p-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 focus:outline-none dark:bg-gray-700 dark:text-white">
                <option value="all">All</option>
                <option value="images">Images</option>
                <option value="videos">Videos</option>
                <option value="users">Users</option>
            </select>
            <button class="flex items-center justify-center w-full md:w-auto p-3 bg-pink-500 dark:bg-pink-700 text-white rounded-lg shadow hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-200">
                <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-4a9 9 0 10-6 0 9 9 0 006 0z" />
                </svg>
                Search
            </button>
        </div>
    </form>
    <div class="mt-6 bg-gray-100 dark:bg-gray-900 p-4 rounded-lg border border-gray-300 dark:border-gray-600">
        <h3 class="text-gray-700 dark:text-white mb-2">Featured Users</h3>
        <div class="flex items-center space-x-3">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User1</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User2</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User3</span>
        </div>
    </div>
</div>

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

ブログやコンテンツの消費用に設計されたシンプルなレトロ/ビンテージスタイルの検索ボックスコンポーネント。単色の配色を使用し、ダークテーマのサポートでレスポンシブです。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Search</h2>
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 border rounded-lg focus:outline-none focus:border-gray-500 dark:focus:border-gray-600" />
            <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                <button class="bg-blue-500 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3a8 8 0 11-8 8 8 8 0 018-8z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

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

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

開けるプレビュー

                <div class="flex justify-center items-center p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-1/2">
    <input type="text" placeholder="Search..." class="w-full h-12 p-4 mr-2 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-300 transition duration-200 ease-in-out" />
    <button class="h-12 px-4 text-white bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 rounded-lg focus:outline-none transition duration-200 ease-in-out">Search</button>
</div>

<div class="mt-6 bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio</h2>
    <p class="text-gray-600 dark:text-gray-400">Showcasing work or products.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
    </div>
</div>

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

現実世界の検索ボックスを模倣するスキューモーフィックスタイルで設計された検索ボックスコンポーネントで、トライアドカラースキームを使用し、ポートフォリオに適しており、ダークモードをサポートして応答性があります。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">  
    <div class="relative w-full max-w-md">  
        <input type="text" placeholder="Search..."  
            class="w-full p-4 pl-10 pr-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700"/>  
        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600">  
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">  
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a7 7 0 100 14 7 7 0 000-14zM16.293 16.293a8 8 0 111.414-1.414l4.281 4.283-1.414 1.414-4.282-4.283z" />  
            </svg>  
        </div>  
    </div>  
</div>

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

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

開けるプレビュー

                <body>
  <div class="min-h-screen bg-gradient-to-br from-pastel-pink-200 to-pastel-blue-200 dark:from-pastel-purple-900 dark:to-pastel-teal-900 p-8">
    <div class="max-w-md mx-auto">

      <!-- Simple Search Box -->
      <div class="relative transform translate-z-0 group">
        <input type="text" placeholder="Search..." class="w-full px-6 py-3 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-pastel-green-400 dark:focus:ring-pastel-teal-600 transition-all transform origin-center group-hover:-translate-y-1 group-hover:shadow-lg">
        <div class="absolute inset-0 border-2 border-pastel-green-400 dark:border-pastel-teal-600 rounded-lg pointer-events-none transform translate-z-0 group-hover:-translate-y-1"></div>
        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-400 dark:text-gray-500 pointer-events-none" 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>
</body>

レトロヴィンテージ検索ボックス

レトロ/ビンテージの美学でスタイル化されたレスポンシブ検索ボックスコンポーネントで、ソーシャルメディアインターフェイスに適した類似の配色を利用し、ダークテーマをサポートしています。

開けるプレビュー

                <div class="flex justify-center items-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-900 dark:to-pink-800 rounded-lg shadow-lg mt-10">
    <input type="text" placeholder="Search..." class="w-80 p-3 border-2 border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:border-purple-700 dark:bg-gray-800 dark:text-white dark:focus:ring-pink-600">
    <button class="ml-2 p-3 bg-yellow-400 text-white rounded-lg font-semibold hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
        <img src="https://picsum.photos/20/20" alt="Search Icon" class="inline"> Search
    </button>
</div>

<div class="flex justify-center items-center mt-3">
    <img src="https://picsum.photos/200/100" alt="Search Illustration" class="rounded-md shadow-md">
</div>

<div class="mt-5 text-center">
    <div class="flex items-center justify-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
        <p class="ml-2 text-lg text-gray-800 dark:text-gray-200">User Name</p>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Search for something amazing...</p>
</div>

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

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

開けるプレビュー

                <div class="flex justify-center items-center p-4 bg-gray-800 dark:bg-gray-900">
    <input type="text" placeholder="Search..." class="w-full max-w-md p-2 border-2 border-blue-500 dark:border-blue-300 rounded-lg bg-gray-700 dark:bg-gray-800 text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:border-blue-400 dark:focus:border-blue-200">
    <button class="ml-2 p-2 bg-blue-500 dark:bg-blue-600 rounded-lg text-white hover:bg-blue-400 dark:hover:bg-blue-500 focus:outline-none">Search</button>
</div>

ブルータリスト検索ボックス

ダッシュボード用の残忍な検索ボックスコンポーネントで、補完的な配色と適度な複雑さが特徴で、レスポンシブデザインと Tailwind CSS を使用したダークテーマのサポートを備えています。

開けるプレビュー

                <div class="relative max-w-md mx-auto mt-10">
  <input type="text" placeholder="Search..." class="w-full px-6 py-4 text-lg text-gray-800 bg-yellow-300 border-4 border-black focus:outline-none focus:border-red-600 dark:bg-yellow-600 dark:text-gray-200 dark:border-white dark:focus:border-red-800">
  <svg class="absolute right-0 top-0 mt-4 mr-5 w-6 h-6 text-black dark: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>
</div>