Componente Casella di ricerca
Un componente della casella di ricerca dal design minimalista e piatto con una combinazione di colori pastello, un'interfaccia complessa con più elementi interattivi, progettata per un portfolio che mostra lavori o prodotti.
Codice HTML
<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>Componenti correlati
Componente Casella di ricerca
Un componente della casella di ricerca retrò/vintage con Tailwind CSS. È dotato di un design reattivo, supporto per temi scuri e immagini segnaposto.
Casella di ricerca brutalista
Un componente della casella di ricerca brutalista per una dashboard, caratterizzato da una combinazione di colori complementari e complessità moderata, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Skeuomorphic_Vibrant_Search_Box_Component
Un componente della casella di ricerca di complessità moderata con un design scheumorfico, una combinazione di colori vivaci e una reattività completa con supporto della modalità scura, adatto per blog/siti di contenuti.