Boîte de recherche vintage rétro
Un composant de champ de recherche réactif doté d’une esthétique rétro/vintage, utilisant une palette de couleurs analogue adaptée aux interfaces de médias sociaux, avec prise en charge du thème sombre.
HTML Code
<div class="flex justify-center items-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-900 dark:to-pink-800 rounded-lg shadow-lg mt-10">
<input type="text" placeholder="Search..." class="w-80 p-3 border-2 border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:border-purple-700 dark:bg-gray-800 dark:text-white dark:focus:ring-pink-600">
<button class="ml-2 p-3 bg-yellow-400 text-white rounded-lg font-semibold hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<img src="https://picsum.photos/20/20" alt="Search Icon" class="inline"> Search
</button>
</div>
<div class="flex justify-center items-center mt-3">
<img src="https://picsum.photos/200/100" alt="Search Illustration" class="rounded-md shadow-md">
</div>
<div class="mt-5 text-center">
<div class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
<p class="ml-2 text-lg text-gray-800 dark:text-gray-200">User Name</p>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Search for something amazing...</p>
</div>Composants associés
Composant de zone de recherche
Un composant de boîte de recherche rétro/vintage stylisé avec Tailwind CSS. Il présente un design réactif, une prise en charge des thèmes sombres et des images de remplacement.
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.
Composant de zone de recherche
Un composant de champ de recherche réactif conçu dans un style brutaliste avec prise en charge du thème sombre à l’aide de Tailwind CSS.