Composant de bouton de suivi neumorphe
Un composant de bouton de suivi complexe, de style neumorphe, avec des tons crépuscules/chauds, conçu pour les plateformes immobilières. Il présente un design réactif et une prise en charge du mode sombre, donnant l’impression que les éléments s’extrudent de l’arrière-plan à l’aide d’ombres subtiles.
HTML Code
<div class="p-6 md:p-10 bg-orange-100 dark:bg-zinc-800 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm rounded-3xl p-6 shadow-xl relative
bg-gradient-to-br from-orange-200 to-amber-100
dark:from-zinc-700 dark:to-zinc-900
dark:shadow-zinc-950/80 shadow-orange-300/60
">
<!-- Neumorphic Card Base -->
<div class="relative z-10">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full
border-2 border-orange-300 dark:border-zinc-600
shadow-lg shadow-orange-300/40 dark:shadow-zinc-950/60
object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Agent Avatar">
<div>
<h3 class="text-xl font-semibold text-orange-900 dark:text-orange-200">Evelyn Sharp</h3>
<p class="text-sm text-orange-700 dark:text-zinc-400">Senior Agent</p>
</div>
</div>
<!-- More Info Button -->
<a href="#" class="
px-4 py-2 rounded-xl text-sm font-medium
bg-gradient-to-br from-orange-300 to-amber-200
dark:from-zinc-600 dark:to-zinc-800
text-orange-900 dark:text-orange-200
shadow-inner shadow-orange-400/60 dark:shadow-zinc-900/60
hover:from-orange-400 hover:to-orange-300
dark:hover:from-zinc-700 dark:hover:to-zinc-600
transform transition-transform duration-300 hover:scale-105
active:shadow-none active:scale-95
sm: block md:inline-block">
More Info
</a>
</div>
<p class="text-orange-800 dark:text-zinc-300 mb-6 text-sm leading-relaxed">
Specializing in luxury residential properties in metropolitan areas. Over 10 years of experience helping clients find their dream homes.
</p>
<!-- Key Stats / Properties -->
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="
p-4 rounded-xl text-center
bg-gradient-to-br from-orange-100 to-amber-50
dark:from-zinc-700 dark:to-zinc-900
shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50
border border-orange-200/50 dark:border-zinc-800/50
">
<p class="text-lg font-bold text-orange-900 dark:text-orange-200">150+</p>
<p class="text-sm text-orange-700 dark:text-zinc-400">Properties Sold</p>
</div>
<div class="
p-4 rounded-xl text-center
bg-gradient-to-br from-orange-100 to-amber-50
dark:from-zinc-700 dark:to-zinc-900
shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50
border border-orange-200/50 dark:border-zinc-800/50
">
<p class="text-lg font-bold text-orange-900 dark:text-orange-200">4.9</p>
<p class="text-sm text-orange-700 dark:text-zinc-400">Rating</p>
</div>
</div>
<!-- Follow Button -->
<button class="
w-full py-4 rounded-2xl text-lg font-bold
bg-gradient-to-br from-orange-400 to-amber-300
dark:from-amber-600 dark:to-orange-500
text-orange-950 dark:text-zinc-950
shadow-lg shadow-orange-500/60 dark:shadow-amber-900/60
hover:from-orange-500 hover:to-orange-400
dark:hover:from-amber-700 dark:hover:to-orange-600
transform transition-transform duration-300
focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100
dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
active:shadow-none active:scale-98
flex items-center justify-center space-x-2
">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 1 014 4v6a4 4 01-4 4H8a4 4 01-4-4v-6a4 4 014-4h4z" />
</svg>
<span>Follow Agent</span>
</button>
<!-- Contact Options -->
<div class="flex justify-around mt-8">
<button class="
p-4 rounded-full
bg-gradient-to-br from-orange-200 to-amber-100
dark:from-zinc-700 dark:to-zinc-900
text-orange-700 dark:text-orange-200
shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50
hover:from-orange-300 hover:to-orange-200
dark:hover:from-zinc-800 dark:hover:to-zinc-700
transform transition-transform duration-300 hover:scale-110
active:shadow-none active:scale-95
focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100
dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 011.854-1.995A2 2 018 2h8a2 2 011.819 1.056l-3.328 10.655a2 2 01-1.077 1.077L13 18.066V20h-2v-1.934L7.509 15.7A2 2 016.438 14.623L3.181 4.944A2 2 013 5z" />
</svg>
</button>
<button class="
p-4 rounded-full
bg-gradient-to-br from-orange-200 to-amber-100
dark:from-zinc-700 dark:to-zinc-900
text-orange-700 dark:text-orange-200
shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50
hover:from-orange-300 hover:to-orange-200
dark:hover:from-zinc-800 dark:hover:to-zinc-700
transform transition-transform duration-300 hover:scale-110
active:shadow-none active:scale-95
focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100
dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 01-4.255-1.106L4 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<button class="
p-4 rounded-full
bg-gradient-to-br from-orange-200 to-amber-100
dark:from-zinc-700 dark:to-zinc-900
text-orange-700 dark:text-orange-200
shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50
hover:from-orange-300 hover:to-orange-200
dark:hover:from-zinc-800 dark:hover:to-zinc-700
transform transition-transform duration-300 hover:scale-110
active:shadow-none active:scale-95
focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100
dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 010.591 1.409L2.5 12l.529.071c.783.111 1.547.452 2.18.98L7.058 15.65h.001a4.522 4.522 004.582 0l2.35-1.921c.633-.528 1.397-.869 2.18-.98l.529-.071L18.5 5a2 2 00-1.802-1.802zM15 11a3 3 01-3 3s-3-3-3-3" />
</svg>
</button>
</div>
</div>
</div>
</div>Composants associés
Composant Suivre le bouton
Un composant de bouton de suivi conçu dans le style brutalisme avec un contraste élevé et une apparence brute et audacieuse. Il est réactif et prend en charge les thèmes sombres.
BrutalisteFollowButton
Un bouton de suivi brutaliste avec prise en charge du mode réactif et sombre.
Composant Suivre le bouton
Un composant de bouton de suivi réactif conçu dans le style Material Design avec prise en charge du mode sombre à l’aide de Tailwind CSS.