Componente di navigazione della barra laterale
Componente di navigazione reattiva della barra laterale con supporto per la modalità scura. Design minimalista/piatto, combinazione di colori monocromatica, interfaccia complessa per portfolio. Utilizza Tailwind CSS, picsum.photos e randomuser.me. Niente JavaScript.
Codice HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-white dark:bg-gray-800 shadow-lg">
<div class="p-4">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
</div>
<nav class="mt-4">
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
</nav>
<!-- Profile Section -->
<div class="absolute bottom-0 w-full p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<p class="font-bold text-gray-800 dark:text-white">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">View Profile</p>
</div>
</div>
</div>
</div>
<!-- Main Content (responsive - adjust margin-left on larger screens) -->
<div class="flex-1 p-8">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to my Portfolio</h2>
<!-- Project Grid (Example) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image">
<div class="p-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Project Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image">
<div class="p-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Project Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image">
<div class="p-4">
<h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale reattivo progettato in stile Brutalismo, perfetto per le applicazioni di e-commerce. Presenta colori vivaci, contrasto elevato e molteplici elementi interattivi, inclusi collegamenti a diverse categorie di shopping, opzioni di account utente e un vivace pulsante di invito all'azione per l'accesso al carrello. Il design si adatta anche alla modalità oscura.
Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale reattivo con uno stile scheumorfico con supporto per temi scuri utilizzando Tailwind CSS.
Barra di navigazione laterale Brutalismo
Componente di navigazione della barra laterale reattiva con design brutalista, combinazione di colori vivaci e layout semplice per uno scopo di blog/contenuto. Include il supporto per la modalità oscura.