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

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

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

プレビュー

HTMLコード 

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

関連コンポーネント

ブルータリズム検索ボックス

ブルータリズムスタイル、レスポンシブ、ダークテーマのサポート、JSなしの検索ボックスコンポーネント。必要に応じて、画像に picsum.photos を使用し、アバターに randomuser.me を使用します。

開ける

Brutalist_Weather_Search_Box

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

開ける

Industrial_Food_Search_Box

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

開ける