検索ボックスコンポーネント
ダークモードのサポートと補色の配色を備えたソーシャルメディアインターフェイス用に設計されたシンプルな検索ボックスコンポーネント。
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>
関連コンポーネント
Skeuomorphic_Vibrant_Search_Box_Component
スキューモーフィックなデザイン、鮮やかな配色、ダークモードをサポートする完全な応答性を備えた、中程度の複雑さの検索ボックスコンポーネントで、ブログ/コンテンツサイトに適しています。
検索ボックスコンポーネント
ダークモードUI、単色の配色、およびTailwind CSSを使用したソーシャルメディアの適度な複雑さを備えた検索ボックスコンポーネント。ダークテーマをサポートするレスポンシブデザイン。
Industrial_Candy_SearchBox
工業的でありながらキャンディー色の美学を備えた、適度に複雑でレスポンシブな検索ボックスコンポーネントで、プロフェッショナルな企業Webサイト向けに設計されており、ダークモードのサポートを備えています。