Composant de navigation 3D
Un composant de navigation 3D réactif conçu avec Tailwind CSS, avec la prise en charge des thèmes sombres et des éléments tridimensionnels attrayants.
HTML Code
<nav class="bg-gray-800 shadow-xl p-4 rounded-lg">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
<h1 class="text-white ml-2 text-2xl font-bold">MyWebsite</h1>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Home</a>
<a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">About</a>
<a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Services</a>
<a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Contact</a>
</div>
<div class="md:hidden">
<button class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<div class="md:hidden mt-2">
<div class="flex flex-col space-y-2">
<a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Home</a>
<a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">About</a>
<a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Services</a>
<a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Contact</a>
</div>
</div>
</nav>
<style>
@media (prefers-color-scheme: dark) {
nav {
background-color: #1a202c;
}
.text-white {
color: #f7fafc;
}
.text-gray-200 {
color: rgba(255, 255, 255, 0.7);
}
.hover\:bg-gray-700:hover {
background-color: #4a5568;
}
nav a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
</style>Composants associés
Navigation brutaliste dans le commerce électronique
Un composant de navigation de style brutaliste pour le commerce électronique, doté d’une palette de couleurs en niveaux de gris, d’une mise en page complexe, d’une réactivité et d’une prise en charge du mode sombre, construit avec Tailwind CSS.
Composant de navigation par neumorphisme
Composant de navigation Neumorphism optimisé pour les sites Web de portfolio. Il présente une mise en page complexe avec plusieurs éléments interactifs, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. La palette de couleurs est analogue.
Composant de navigation
Un composant de navigation réactif conçu pour l’interface utilisateur en mode sombre, avec des liens, des listes déroulantes et un logo, le tout stylisé avec Tailwind CSS.