Search Box Component
A minimalist and flat design search box component with a pastel color scheme, complex interface with multiple interactive elements, designed for a portfolio showcasing work or products.
HTML Code
<div class="flex justify-center items-center p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-1/2">
<input type="text" placeholder="Search..." class="w-full h-12 p-4 mr-2 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-300 transition duration-200 ease-in-out" />
<button class="h-12 px-4 text-white bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 rounded-lg focus:outline-none transition duration-200 ease-in-out">Search</button>
</div>
<div class="mt-6 bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio</h2>
<p class="text-gray-600 dark:text-gray-400">Showcasing work or products.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" class="w-full" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" class="w-full" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" class="w-full" />
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
</div>
</div>
</div>
</div>Related Components
Search Box Component
A simple search box component designed for social media interfaces with dark mode support and a complementary color scheme.
Gaming Search Box Component
A responsive and simple search box component for gaming websites, inspired by Bauhaus design principles with a forest/green color palette and dark mode support.
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`.