Glassmorphism Search Box Component
A modern search box component with a frosted glass effect (glassmorphism) using pastel colors. The component is simple but elegant, designed for professional business websites. It features a translucent background with subtle blur effects, responsive design, and dark mode support. The search box includes a search icon and a clean input field that fits well in corporate environments.
HTML Code
<!-- Glassmorphism Search Box Component -->
<div class="w-full max-w-md mx-auto px-4">
<!-- Search Container with Glassmorphism Effect -->
<div class="relative backdrop-blur-sm bg-white/40 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 flex items-center shadow-lg transition-all duration-300 hover:shadow-xl">
<!-- Search Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<!-- Search Input -->
<input
type="text"
placeholder="Search..."
class="w-full bg-transparent border-none focus:ring-0 focus:outline-none ml-2 text-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
>
<!-- Optional Clear Button -->
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Optional Hint Text -->
<div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
Search for products, services, or information
</div>
</div>Related Components
Search Box Component
Responsive Search Box component with dark theme support, Earth tones color scheme, and minimal design.
Search Box Component
A responsive search box component designed in a brutalist style with dark theme support using Tailwind CSS.
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.