Componente di navigazione skeuomorfa
Un componente di navigazione progettato in uno stile scheumorfico, caratterizzato da colori vivaci e un layout reattivo adatto ai contenuti del blog. Include funzionalità interattive come gli effetti al passaggio del mouse ed è ottimizzato per la modalità oscura.
Codice HTML
<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>Componenti correlati
Gradient_Corporate_Blues_Navigation_Component
Un componente di navigazione complesso e reattivo progettato per siti Web di organizzazioni no-profit/di beneficenza, con toni di blu aziendali sfumati, transizioni fluide e supporto per la modalità scura. Include un logo, link di navigazione, un pulsante di invito all'azione e un menu per dispositivi mobili.
Componente di navigazione neumorfica
Un componente di navigazione semplice e reattivo con uno stile di design neumorfico, che utilizza una combinazione di colori viola/viola, adatto per un forum o una piattaforma di comunità. Include il supporto per la modalità oscura.
Componente di navigazione reattiva
Componente di navigazione reattiva con microinterazioni, combinazione di colori in scala di grigi e complessità semplice.