Composant Boutons
Un composant de boutons de style rétro/vintage qui présente des effets réactifs et une prise en charge du thème sombre, conçu pour évoquer la nostalgie de l’esthétique des années 80 et 90.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
<h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Retro/Vintage Buttons</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<button class="bg-pink-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
Retro Pink Button
</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
Vintage Blue Button
</button>
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
Nostalgic Green Button
</button>
<button class="bg-purple-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500">
Retro Purple Button
</button>
</div>
<div class="mt-8">
<img class="w-32 h-32 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://picsum.photos/200/200" alt="Random Placeholder" />
<p class="text-center text-gray-600 dark:text-gray-300">Nostalgic Image</p>
</div>
<div class="mt-4">
<img class="w-16 h-16 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Random User Avatar" />
<p class="text-center text-gray-600 dark:text-gray-300">User Avatar</p>
</div>
</div>Composants associés
Composant Boutons
Un composant de boutons minimaliste conçu pour un portfolio présentant des travaux ou des produits, avec des couleurs vives et un design réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Boutons
Un composant de boutons réactifs avec prise en charge du mode sombre pour les portfolios. Dispose d’un design plat minimaliste en niveaux de gris avec une complexité modérée.
Composant Boutons
Un composant de boutons au design minimaliste / plat avec une palette de couleurs en niveaux de gris. Il convient aux sites Web d’entreprise et a une complexité modérée avec certaines fonctionnalités interactives. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.