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

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

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

プレビュー

HTMLコード 

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

関連コンポーネント

スキューモーフィック検索ボックス

現実世界の要素を模倣したスキューモーフィックなデザインの検索ボックスコンポーネントで、応答性とダークテーマのサポートが特徴です。

開ける

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

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

開ける

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

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

開ける