Composant de zone de recherche
Un composant de champ de recherche minimaliste et plat avec une palette de couleurs pastel, une interface complexe avec de multiples éléments interactifs, conçu pour un portfolio présentant des travaux ou des produits.
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>Composants associés
Composant de la boîte de recherche Glassmorphism
Un composant de champ de recherche réactif de style glassmorphism avec des couleurs en niveaux de gris, adapté aux blogs ou aux sites de contenu, doté d’une entrée et d’un bouton translucides semblables à du verre dépoli. Inclut la prise en charge du mode sombre.
Composant de zone de recherche
Un composant de champ de recherche de style 3D conçu pour les sites Web d’entreprise et d’entreprise, doté d’une interface complexe avec de la profondeur, des éléments interactifs et une prise en charge du mode sombre.
Composant de zone de recherche
Un composant de champ de recherche minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.