Layout del portfolio in modalità oscura
Un componente di layout reattivo in modalità scura per i portafogli, caratterizzato da una combinazione di colori monocromatica che utilizza Tailwind CSS. Include segnaposto per il contenuto ed è progettato per una complessità moderata senza JavaScript.
Codice HTML
<div class="min-h-screen bg-gray-900 text-gray-200 p-4">
<div class="container mx-auto">
<header class="flex justify-between items-center py-6">
<h1 class="text-2xl font-bold text-gray-100">My Portfolio</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-gray-100">Home</a></li>
<li><a href="#" class="hover:text-gray-100">Projects</a></li>
<li><a href="#" class="hover:text-gray-100">Contact</a></li>
</ul>
</nav>
</header>
<main class="grid grid-cols-1 md:grid-cols-2 gap-8 py-8">
<section>
<h2 class="text-xl font-semibold mb-4">About Me</h2>
<p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section>
<h2 class="text-xl font-semibold mb-4">Recent Projects</h2>
<div class="space-y-4">
<div class="bg-gray-800 p-4 rounded-md">
<h3 class="font-semibold">Project One</h3>
<p class="text-gray-500 text-sm">A brief description of project one.</p>
</div>
<div class="bg-gray-800 p-4 rounded-md">
<h3 class="font-semibold">Project Two</h3>
<p class="text-gray-500 text-sm">A brief description of project two.</p>
</div>
</div>
</section>
</main>
<footer class="text-center py-6 text-gray-500">
© 2023 My Portfolio
</footer>
</div>
</div>Componenti correlati
Swiss_International_Typography_SAAS_Layout
Un layout di applicazione SaaS complesso e reattivo che utilizza i principi di progettazione della tipografia svizzera/internazionale con una combinazione di colori autunnale. Dispone di una barra di navigazione laterale, intestazione, area del contenuto principale e widget, tutti con supporto per la modalità oscura.
Componente Componenti di layout
Un componente di layout del cruscotto reattivo con stile Glassmorphism, combinazione di colori vivaci e supporto per temi scuri utilizzando Tailwind CSS. Presenta una barra laterale e un'area di contenuto principale con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura.
Componente Layout modalità scura
Un componente di layout reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Presenta un'intestazione, un'area del contenuto e un piè di pagina semplici. La modalità oscura è gestita dal prefisso 'dark:' nelle classi Tailwind.