Components Search Box Search Box Component

Search Box Component

A simple search box component designed for social media interfaces with dark mode support and a complementary color scheme.

Preview

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

Search Box Component with Dark Mode UI, Monochromatic color scheme, and Moderate complexity for Social Media using Tailwind CSS. Responsive design with dark theme support.

Open

Skeuomorphic Search Box Component

Skeuomorphic Search Box for Social Media

Open

RetroSearchBox

Retro/Vintage Search Box with 80s/90s aesthetics, responsive, dark mode support.

Open