Composant Boutons
Un composant de boutons de style 3D adapté à un portefeuille avec une palette de couleurs analogue et la prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center mt-10 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Showcase Your Work</h2>
<div class="flex space-x-4">
<a href="#" class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Portfolio</a>
<a href="#" class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Products</a>
<a href="#" class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Contact</a>
</div>
</div>
<div class="flex flex-col items-center justify-center mt-10 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Our Team</h2>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
</div>
</div>
<div class="flex flex-col items-center justify-center mt-10 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Portfolio Preview</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<img src="https://picsum.photos/id/1011/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
<img src="https://picsum.photos/id/1012/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
<img src="https://picsum.photos/id/1013/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
</div>
</div>Composants associés
Boutons de médias sociaux Neumorphism
Un composant de bouton simple de style Neumorphism pour les interfaces de médias sociaux, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Le bouton utilise une palette de couleurs analogue et des ombres subtiles pour créer un aspect doux et extrudé.
Composant Boutons
Un composant de boutons conçu dans le style Material Design avec une palette de couleurs pastel, réactif pour les sites Web d’entreprise/d’entreprise et prenant en charge les thèmes sombres.