Skeuomorphe Navigationskomponente
Eine Navigationskomponente, die in einem skeuomorphen Stil gestaltet ist, mit leuchtenden Farben und einem responsiven Layout, das für Blog-Inhalte geeignet ist. Es enthält interaktive Funktionen wie Hover-Effekte und ist für den Dunkelmodus optimiert.
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>Verwandte Komponenten
Bauhaus Wetter-Navi
Eine reaktionsschnelle Navigationskomponente für eine Wetter- und Klimaanwendung mit einem vom Bauhaus inspirierten Design mit geometrischen Formen, gedämpften Farben und vollständiger Unterstützung des Dunkelmodus.
Navigationskomponente
Eine reaktionsschnelle Navigationskomponente, die mit Tailwind CSS für den Dunkelmodus formatiert wurde.