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
Composant Boutons
Composant de bouton simple et réactif avec un design en niveaux de gris inspiré du papier/de l’impression, adapté aux plates-formes éducatives, prenant en charge les modes clair et sombre.
Composant Boutons
Un composant de bouton minimaliste pour les tableaux de bord, avec prise en charge du responsive design et du thème sombre.
Composant Boutons
Un composant de boutons de style rétro/vintage qui présente des effets réactifs et une prise en charge du thème sombre, conçu pour évoquer la nostalgie de l’esthétique des années 80 et 90.