Composants d’amélioration de la navigation
Un composant d’amélioration de la navigation réactif pour un blog en mode sombre avec des couleurs vives et des fonctionnalités de complexité modérée.
HTML Code
<nav class="bg-gray-900 text-white p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-lg font-bold hover:text-blue-400">My Blog</a>
<a href="#" class="hover:text-blue-400">Home</a>
<a href="#" class="hover:text-blue-400">About</a>
<a href="#" class="hover:text-blue-400">Contact</a>
</div>
<div class="relative">
<input type="text" placeholder="Search..." class="bg-gray-800 text-white rounded-full pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />
<svg class="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35"/>
<circle cx="10.5" cy="10.5" r="6.5"/>
</svg>
</div>
</div>
</nav>
<section class="bg-gray-800 text-white p-8 mt-4">
<h2 class="text-2xl font-bold mb-4">Latest Articles</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
<img src="https://picsum.photos/400/200?random=1" alt="article image" class="w-full rounded-lg mb-2" />
<h3 class="text-lg font-semibold">Article Title 1</h3>
<p class="text-gray-400">Short description of the article content goes here.</p>
</article>
<article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
<img src="https://picsum.photos/400/200?random=2" alt="article image" class="w-full rounded-lg mb-2" />
<h3 class="text-lg font-semibold">Article Title 2</h3>
<p class="text-gray-400">Short description of the article content goes here.</p>
</article>
<article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
<img src="https://picsum.photos/400/200?random=3" alt="article image" class="w-full rounded-lg mb-2" />
<h3 class="text-lg font-semibold">Article Title 3</h3>
<p class="text-gray-400">Short description of the article content goes here.</p>
</article>
</div>
</section>
<footer class="bg-gray-900 text-white p-4 mt-4">
<div class="container mx-auto flex justify-between items-center">
<p class="text-sm">© 2023 My Blog. All rights reserved.</p>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="user avatar" class="w-8 h-8 rounded-full" />
<span class="text-sm">User Name</span>
</div>
</div>
</footer>Composants associés
Composants d’amélioration de la navigation
Un composant de navigation conçu avec le skeuomorphisme, avec des éléments numériques qui imitent leurs homologues du monde réel. Il est stylisé à l’aide de Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
Composant d’amélioration de la navigation
Un composant d’amélioration de la navigation conçu dans un style brutaliste. Avec des effets réactifs, la prise en charge du thème sombre et des images de remplacement.
Composants d’amélioration de la navigation
Un composant de navigation conçu avec une esthétique brutaliste, avec des designs audacieux, un contraste élevé et des mises en page inhabituelles. Il comprend des effets réactifs et prend en charge les thèmes sombres avec CSS.