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

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

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

プレビュー

HTMLコード 

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

関連コンポーネント

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

Tailwind CSSでスタイリングされたレトロ/ビンテージ検索ボックスコンポーネント。レスポンシブデザイン、ダークテーマのサポート、プレースホルダー画像を備えています。

開ける

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

パステルカラーを使用したすりガラス効果(glassmorphism)を備えた最新の検索ボックスコンポーネント。コンポーネントはシンプルですがエレガントで、プロのビジネスWebサイト向けに設計されています。微妙なぼかし効果を備えた半透明の背景、レスポンシブデザイン、ダークモードのサポートが特徴です。検索ボックスには、検索アイコンと、企業環境に適したクリーンな入力フィールドが含まれています。

開ける

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

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

開ける