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
Composant de navigation dans les médias sociaux
Un composant de navigation réactif conçu pour les interfaces de médias sociaux, avec une esthétique Material Design utilisant un thème sombre avec Tailwind CSS.
Composant de navigation de luxe
Un composant de navigation élégant et réactif pour les marques de mode et de beauté, doté d’un design sophistiqué en noir et blanc avec une couleur d’accentuation vive, une prise en charge du mode sombre et un minimum d’éléments.
Navigation minimaliste dans les restaurants et les restaurants
Un composant de navigation minimaliste et réactif pour les sites Web d’alimentation et de restaurants, avec des tons de bijoux, la prise en charge du mode sombre et un design plat et épuré. Comprend un logo, des liens de navigation et un bouton d’appel à l’action, avec un menu de hamburgers adapté aux mobiles.