Brutalist Search Box
A brutalist search box component for a dashboard, featuring a complementary color scheme and moderate complexity, with responsive design and dark theme support using Tailwind CSS.
HTML Code
<div class="relative max-w-md mx-auto mt-10">
<input type="text" placeholder="Search..." class="w-full px-6 py-4 text-lg text-gray-800 bg-yellow-300 border-4 border-black focus:outline-none focus:border-red-600 dark:bg-yellow-600 dark:text-gray-200 dark:border-white dark:focus:border-red-800">
<svg class="absolute right-0 top-0 mt-4 mr-5 w-6 h-6 text-black dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>Related Components
Search Box Component
A responsive search box component designed with Material Design principles, featuring Tailwind CSS styles and dark theme support.
Search Box Component
A responsive search box component designed with glassmorphism style, supporting dark mode and tailored for e-commerce applications.
Material Design Search Box
A Search Box component inspired by Material Design principles, built using Tailwind CSS. It features responsive behavior adapting to container width, visual feedback through hover and focus shadow transitions (depth effects), and comprehensive dark theme support. The component includes a leading search icon and ensures a clean, modern aesthetic. CSS-only implementation. Ideal for embedding in various layouts due to its `w-full` nature. For accessibility, ensure to pair the `input` element with a corresponding `<label>` or provide a descriptive `aria-label`.