Skeuomorphic Search Box
A search box component with a skeuomorphic design that mimics real-world elements, featuring responsiveness and 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="relative w-full max-w-md">
<input type="text" class="p-4 pl-10 pr-4 text-gray-900 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-800 dark:text-white dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400" placeholder="Search..." />
<svg class="absolute left-3 top-3 w-5 h-5 text-gray-400 dark:text-gray-500" 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="M10 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm4 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16z" />
</svg>
</div>
</div>Related Components
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.
Brutalism search box
Search Box Component with Brutalism style, responsive, dark theme support, no JS. Uses picsum.photos for images and randomuser.me for avatars if needed.
Search Box Component
A responsive search box component designed with glassmorphism style, supporting dark mode and tailored for e-commerce applications.