Composant de navigation skeuomorphe
Un composant de navigation conçu dans un style skeuomorphe, avec des couleurs vives et une mise en page réactive adaptée au contenu du blog. Il comprend des fonctionnalités interactives telles que des effets de survol et est optimisé pour le mode sombre.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex items-center mb-4 md:mb-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<h1 class="text-lg font-bold text-violet-700 dark:text-violet-400 ml-3">My Blog</h1>
</div>
<ul class="flex flex-col md:flex-row space-x-0 md:space-x-6">
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
</li>
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
</li>
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Blog</a>
</li>
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
</li>
</ul>
</nav>
<div class="container mx-auto p-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Latest Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<img class="rounded-lg" src="https://picsum.photos/400/200" alt="Blog Post">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title One</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the first blog post. It's an engaging intro that invites readers to learn more.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<img class="rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Blog Post">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title Two</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the second blog post. It has some intriguing insights to offer.</p>
</div>
</div>
</div>Composants associés
Composant de navigation réactive
Composant de navigation réactif avec micro-interactions, palette de couleurs en niveaux de gris et complexité simple.
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 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.