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.
Boîte de recherche brutaliste
Un composant de champ de recherche brutaliste pour un tableau de bord, doté d’une palette de couleurs complémentaires et d’une complexité modérée, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de zone de recherche
Un composant de champ de recherche complexe conçu dans un style brutaliste avec une palette de couleurs pastel, adapté aux interfaces de médias sociaux. Le composant comprend des éléments interactifs tels que la saisie de recherche, des filtres et un bouton d’envoi, tous prenant en charge le mode sombre.