Search Box Component
A simple retro/vintage styled search box component designed for a blog or content consumption. It uses a monochromatic color scheme and is responsive with dark theme support.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Search</h2>
<div class="relative">
<input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 border rounded-lg focus:outline-none focus:border-gray-500 dark:focus:border-gray-600" />
<div class="absolute inset-y-0 right-0 flex items-center pr-2">
<button class="bg-blue-500 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3a8 8 0 11-8 8 8 8 0 018-8z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
</svg>
</button>
</div>
</div>
</div>
</div>Related Components
Skeuomorphic Search Box
A search box component with a skeuomorphic design that mimics real-world elements, featuring responsiveness and dark theme support.
Search Box Component
A Search Box Component designed with Brutalism styling using Tailwind CSS. Features high contrast design, responsive effects, and supports dark theme.
Search Box Component
Responsive Search Box component with dark theme support, Earth tones color scheme, and minimal design.