Search Box Component
A simple search box component designed for social media interfaces with dark mode support and a complementary color scheme.
HTML Code
<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>
Related Components
Search Box Component
A Glassmorphism-style complex search box component with analogous color scheme, suitable for a portfolio, featuring responsive design and dark theme support using only HTML and Tailwind CSS.
Search Box Component
A complex search box component designed in Brutalist style with a pastel color scheme, tailored for social media interfaces. The component includes interactive elements like search input, filters, and a submit button, all supporting dark mode.
Search Box Component
A responsive search box component with a minimalist/flat design, vibrant color scheme, and complex interactions, suitable for business/corporate websites. It supports dark mode and is built with Tailwind CSS.