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

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

ビジネスや企業のWebサイト向けに設計された3Dスタイルの検索ボックスコンポーネントで、奥行きのある複雑なインターフェイス、インタラクティブな要素、ダークモードのサポートを備えています。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-gray-800 to-gray-700 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
    <h2 class="text-white text-2xl font-semibold mb-4">Search Our Resources</h2>
    <div class="relative w-full max-w-md">
        <input type="text" placeholder="Search..." class="w-full p-4 pl-10 text-gray-900 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition-all duration-200" />
        <div class="absolute inset-y-0 left-0 flex items-center pl-3">
            <img src="https://picsum.photos/20/20" alt="Search Icon" class="w-5 h-5 text-gray-400 dark:text-gray-500" />
        </div>
    </div>
    <div class="flex justify-between items-center w-full mt-4">
        <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow hover:bg-blue-700 transition-all duration-200">Search</button>
        <button class="px-4 py-2 text-sm font-medium text-gray-200 dark:text-gray-400 hover:underline">Advanced Search</button>
    </div>
</div>

関連コンポーネント

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

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

開ける

Brutalist_Weather_Search_Box

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

開ける

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

Tailwind CSSを使用したBrutalismスタイルでデザインされた検索ボックスコンポーネント。ハイコントラストデザイン、レスポンシブエフェクトが特徴で、ダークテーマをサポートします。

開ける