Composant de bouton de suivi neumorphe
Un composant de bouton de suivi neumorphe complexe et interactif avec des tons océan/bleu, conçu pour les interfaces de médias sociaux. Comprend la prise en charge du mode sombre et la conception réactive.
HTML Code
<div class="flex items-center justify-center min-h-screen p-4 bg-blue-100 dark:bg-gray-900 transition-colors duration-300">
<!-- Neumorphic Follow Card Container -->
<div class="w-full max-w-sm p-6 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
<div class="flex flex-col items-center space-y-5">
<!-- Profile Picture and Name -->
<div class="relative">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-24 h-24 rounded-full object-cover shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition-colors duration-300">
<span class="absolute bottom-0 right-0 w-6 h-6 bg-green-400 rounded-full border-2 border-blue-100 dark:border-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark"></span>
</div>
<div class="text-center">
<h2 class="text-2xl font-bold text-blue-900 dark:text-blue-100">Jane Doe</h2>
<p class="text-blue-700 dark:text-blue-300">@janedoe_official</p>
<p class="text-sm text-blue-600 dark:text-blue-400 mt-2">UI/UX Designer | Building beautiful experiences.</p>
</div>
<!-- Stats Section -->
<div class="grid grid-cols-3 gap-4 w-full mt-4">
<div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
<span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">1.2k</span>
<span class="text-blue-700 dark:text-blue-300 text-xs">Posts</span>
</div>
<div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
<span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">5.8k</span>
<span class="text-blue-700 dark:text-blue-300 text-xs">Followers</span>
</div>
<div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
<span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">345</span>
<span class="text-blue-700 dark:text-blue-300 text-xs">Following</span>
</div>
</div>
<!-- Follow Button Group -->
<div class="flex flex-col md:flex-row gap-4 w-full mt-5">
<button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
bg-gradient-to-br from-blue-500 to-blue-700 text-white
hover:from-blue-600 hover:to-blue-800
shadow-neumorphic-blue dark:shadow-neumorphic-dark-blue
active:shadow-neumorphic-blue-inset dark:active:shadow-neumorphic-dark-blue-inset
transition-all duration-200 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
dark:text-blue-100">
Follow
</button>
<button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
bg-blue-100 dark:bg-gray-800 text-blue-800 dark:text-blue-200
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:bg-blue-200 dark:hover:bg-gray-700
active:shadow-neumorphic-light-inset dark:active:shadow-neumorphic-dark-inset
transition-all duration-200 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
dark:hover:text-blue-100">
Message
</button>
</div>
<!-- Social Icons -->
<div class="flex justify-center space-x-6 mt-6 w-full">
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22.23 6.09c.01.59.01 1.18 0 1.77 0 5.43-4.14 11.66-11.67 11.66A11.68 11.68 0 010 19.34c1.61.18 3.23-.27 4.67-1.35.03.02.05.04.08.06A8.25 8.25 0 0010.5 17c-2.45-.4-4.5-1.63-5.97-3.69-.1-.1-.13-.2-.17-.3A.32.32 0 014 12.82c.04.01.07.03.1.04.57.24 1.18.39 1.8.46-1.92-1.3-3.19-3.52-3.19-6.09 0-1.34.37-2.6.98-3.77A8.34 8.34 0 0010.5 9.4c-.05-1.5-.77-2.88-1.95-3.87.5-.1 1-.16 1.5-.16A8.24 8.24 0 0117.84 8.3c1.78-.57 3.42-1.6 4.79-2.9v-.01zM10.5 2C5.83 2 2 5.8 2 10.5c0 3.73 2.45 6.94 5.82 8.37A10.12 10.12 0 0010.5 20c5.79 0 10.5-4.71 10.5-10.5S16.29 2 10.5 2zm6.27 4.28c-.01.02-.02.04-.04.05.02-.01.03-.03.04-.05z"></path>
</svg>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.24 20.3c-.09.02-.19.03-.29.04a2.91 2.91 0 01-1.89-.66c-.34-.23-.62-.51-.83-.84l-.11-.18A.75.75 0 009 18.23l-.1-.08c-.16-.14-.29-.28-.39-.42-.08-.12-.13-.23-.16-.33l-.04-.13a.75.75 0 00-.73-.55h-.01a.75.75 0 00-.63.29c-.06.07-.12.16-.16.27-.05.11-.08.23-.08.36 0 .1.01.2.02.29.02.1.04.2.07.29.03.09.07.17.11.26.04.09.09.18.15.26.06.09.13.17.2.25.07.09.15.16.23.23l.11.1c.09.08.18.15.28.22.1.07.2.13.31.18.06.03.12.06.19.08.08.02.16.03.24.03.05 0 .1-.01.15-.02.05-.01.09-.02.14-.03.04-.01.08-.02.1-.03l.03-.01v-.01a.15.15 0 01.03-.02l.02-.01a.75.75 0 00.32-.98.75.75 0 00-.98-.32l-.02.01-.03.02a.15.15 0 01-.03.02l-.1.05-.18.06-.29-.1c-.1-.04-.19-.09-.28-.15-.08-.07-.16-.15-.22-.24-.07-.1-.13-.2-.17-.3-.05-.1-.08-.2-.11-.3-.02-.08-.03-.17-.03-.26 0-.27.1-.5.3-.65.2-.16.48-.25.75-.25.21 0 .4.07.57.18.17.11.3.26.4.45.06.11.1.23.14.36.03.12.05.25.05.38 0 .22-.04.42-.12.6-.08.19-.19.35-.33.5-.09.09-.19.16-.3.21-.08.03-.16.05-.24.05-.04 0-.08-.01-.12-.02-.04-.01-.07-.02-.1-.04a.75.75 0 00-.9-.57.75.75 0 00-.57.9c.07.16.14.3.24.43.09.12.2.24.32.34.12.1.25.18.39.24.13.06.28.1.42.11.16.02.32.02.49.02.31 0 .6-.04.88-.13.28-.09.53-.22.75-.4.22-.17.4-.39.54-.64.14-.25.24-.53.29-.83.05-.3.07-.63.07-.98 0-.31-.03-.62-.09-.92-.06-.3-.15-.59-.26-.87-.11-.29-.25-.56-.41-.81-.17-.25-.36-.48-.58-.69-.21-.21-.45-.4-.7-.57-.26-.17-.54-.3-.84-.4-.3-.1-.63-.15-.97-.15-.31 0-.6.04-.88.13-.28.09-.53.22-.75.4-.22.17-.4.39-.54.64-.14.25-.24.53-.29.83-.05.3-.07.63-.07.98 0 .31.03.62.09.92.06.3.15.59.26.87.11.29.25.56.41.81.17.25.36.48.58.69.21.21.45.4.7.57.26.17.54.3.84.4.3.1.63.15.97.15zM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- Custom Tailwind CSS Configuration for Neumorphism -->
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #98b7e0, -6px -6px 12px #d2f7ff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #181c2d, -6px -6px 12px #444c68;
}
.shadow-neumorphic-light-inset {
box-shadow: inset 4px 4px 8px #98b7e0, inset -4px -4px 8px #d2f7ff;
}
.dark .shadow-neumorphic-dark-inset {
box-shadow: inset 4px 4px 8px #181c2d, inset -4px -4px 8px #444c68;
}
.shadow-neumorphic-light-sm {
box-shadow: 3px 3px 6px #a8cce6, -3px -3px 6px #c4ecff;
}
.dark .shadow-neumorphic-dark-sm {
box-shadow: 3px 3px 6px #1c2134, -3px -3px 6px #3a415b;
}
.shadow-neumorphic-blue {
box-shadow: 8px 8px 16px #0a5697, -8px -8px 16px #1072c4;
}
.dark .shadow-neumorphic-dark-blue {
box-shadow: 8px 8px 16px rgba(0,0,0,0.4), -8px -8px 16px rgba(100,100,100,0.2);
}
.shadow-neumorphic-blue-inset {
box-shadow: inset 5px 5px 10px #0a5697, inset -5px -5px 10px #1072c4;
}
.dark .shadow-neumorphic-dark-blue-inset {
box-shadow: inset 5px 5px 10px rgba(0,0,0,0.6), inset -5px -5px 10px rgba(100,100,100,0.3);
}
</style>
</div>
</div>Composants associés
Composant Suivre le bouton
Un bouton « Suivre » épuré et minimaliste conçu avec une palette de couleurs rétro/vintage, adapté à un tableau de bord ou à une page de profil. Il dispose d’un état de survol interactif et d’une prise en charge du mode sombre, incarnant les principes de la typographie suisse et internationale.
Composant Suivre le bouton
Il s’agit d’un composant de bouton de suivi complexe, inspiré du papier/de l’impression, pour les sites Web de jeux, doté d’un design monochrome en noir et blanc avec une couleur d’accent vive, optimisé pour la réactivité et le mode sombre.
Bouton de suivi 3D-Vibrant
Un composant de bouton de suivi simple, inspiré de la 3D, avec des couleurs vives pour les sites Web d’entreprise. Il est réactif et inclut la prise en charge des thèmes sombres en utilisant uniquement HTML et Tailwind CSS.