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 zone de recherche
Composant de boîte de recherche avec conception 3D, effets réactifs et prise en charge du thème sombre.
Composant de zone de recherche
Composant de zone de recherche en mode sombre avec conception réactive et prise en charge du thème sombre. Aucun JavaScript n’est utilisé. Les images sont des images de substitution.
Composant de zone de recherche
Composant de boîte de recherche réactif avec prise en charge du thème sombre, palette de couleurs des tons de terre et design minimal.