Componente pulsante Segui
Un pulsante "Segui" pulito e minimalista progettato con una tavolozza di colori retrò/vintage, adatto per una dashboard o una pagina del profilo. È dotato di uno stato hover interattivo e del supporto per la modalità scura, che incarna i principi della tipografia svizzera/internazionale.
Codice HTML
<div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto font-sans">
<div class="flex flex-col items-center space-y-4">
<img class="w-20 h-20 rounded-full object-cover border-2 border-indigo-400 dark:border-indigo-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="text-center">
<p class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Jane Doe</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">@janedoe_official</p>
</div>
<button class="px-6 py-2 rounded-full border-2 border-indigo-500 bg-indigo-400 text-white font-bold text-sm tracking-wide uppercase shadow-md
hover:bg-indigo-500 hover:border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
dark:bg-indigo-600 dark:border-indigo-700 dark:hover:bg-indigo-700 dark:focus:ring-offset-zinc-800
transition duration-300 ease-in-out">
Follow
</button>
</div>
</div>Componenti correlati
Componente pulsante Segui
Un componente reattivo Segui pulsante progettato con i principi del Material Design, con supporto per la modalità oscura e stili su misura utilizzando Tailwind CSS.
Componente pulsante Segui
Un componente pulsante "Segui" reattivo progettato per le piattaforme immobiliari, caratterizzato da una combinazione di colori blu aziendale, supporto per la modalità scura e un sottile effetto hover interattivo.
Componente pulsante Segui retrò
Un componente semplice e reattivo del pulsante di inseguimento con un'estetica retrò/vintage, una combinazione di colori complementari e uno scopo di gioco, incluso il supporto della modalità oscura.