Composant de navigation
Un composant de navigation réactif conçu pour un portfolio, avec des micro-interactions et la prise en charge des thèmes sombres.
HTML Code
<nav class="bg-gray-800 text-white dark:bg-gray-900 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Home</a>
<a href="#portfolio" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Portfolio</a>
<a href="#about" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">About</a>
<a href="#contact" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Login</a>
<a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Sign Up</a>
</div>
</div>
</nav>
<div class="bg-gray-100 text-black dark:bg-gray-800 dark:text-white">
<div class="container mx-auto p-8">
<h1 class="text-3xl font-bold mb-4">My Portfolio</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de navigation
Un composant de navigation d’inspiration rétro/vintage conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
Composant de navigation skeuomorphe
Un composant de navigation skeuomorphe conçu pour imiter des éléments du monde réel tels qu’un panneau de commande physique ou un tableau de bord. Dispose d’un design réactif, d’effets de survol qui simulent l’appui sur des boutons physiques et d’une prise en charge du thème sombre. La navigation comprend des ombres, des dégradés et des textures subtils pour créer une apparence tactile 3D rappelant les interfaces physiques.
Corporate_Travel_Navigation
Une barre de navigation complexe, propre et fiable pour les sites Web de voyage et de tourisme. Dispose de plusieurs éléments interactifs, d’une réactivité totale et d’une prise en charge du mode sombre utilisant des couleurs complémentaires.