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

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

プレビュー

HTMLコード

<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 を使用したダークテーマのサポートを備えています。

開ける