Componente pulsante Segui
Un componente del pulsante Segui complesso e reattivo con stile glassmorphism e colori vivaci, progettato per siti Web aziendali con supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
<div class="w-full max-w-sm bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 backdrop-filter backdrop-blur-lg glass glass-vibrant">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4 object-cover border-4 border-blue-500 dark:border-teal-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Senior Developer</p>
<button class="px-6 py-2 rounded-full bg-gradient-to-r from-blue-500 to-teal-500 text-white font-semibold shadow-lg transform transition duration-300 hover:scale-105 hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:focus:ring-teal-400">
Follow
</button>
<div class="flex mt-6 space-x-4 text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.524A3 3 0 0010 9a3 3 0 00-2.254.98l-1.524 1.524A8.01 8.01 0 012 10c0-4.411 3.589-8 8-8s8 3.589 8 8z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
<span>1.2k Followers</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 10a4 4 0 01-8 0H5a6 6 0 0012 0h-1z" />
</svg>
<span>250 Following</span>
</div>
</div>
</div>
</div>
</div>
<style>
.glass {
background-color: rgba(255, 255, 255, 0.2);
}
.dark .glass {
background-color: rgba(50, 50, 50, 0.2);
}
.glass-vibrant {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
</style>
Componenti correlati
Componente pulsante Segui
Un pulsante Segui in stile neumorfismo per una dashboard con supporto per temi scuri.
Componente pulsante Segui
Un complesso componente del pulsante follow progettato con un effetto glassmorphism, utilizzando una combinazione di colori complementari, adatto per applicazioni di e-commerce, caratterizzato da un design reattivo e dal supporto del tema scuro.
BrutalistaSeguiPulsante
Un pulsante di inseguimento brutalista con supporto per la modalità reattiva e oscura.