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`.
HTML Code
<!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
<div class="pl-4 pr-2 py-3">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input
type="search"
name="search_query"
id="material_search_box_input"
placeholder="Search..."
aria-label="Search"
class="
appearance-none
w-full h-12
pl-0 pr-4 py-3
text-base text-gray-900 dark:text-gray-100
bg-transparent
focus:outline-none
placeholder-gray-500 dark:placeholder-gray-400
"
/>
</div>
<!-- Component End -->Related Components
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.
Search Box Component
Search Box Component with 3D design, responsive effects, and dark theme support.