Mise en page du portefeuille en mode sombre
Un composant de mise en page réactif en mode sombre pour les portfolios, avec une palette de couleurs monochromatiques à l’aide de Tailwind CSS. Inclut des espaces réservés pour le contenu et est conçu pour une complexité modérée sans JavaScript.
HTML Code
<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>Composants associés
Présentation du portefeuille
Il s’agit d’un composant de mise en page réactif simple pour un portefeuille axé sur les micro-interactions avec des couleurs complémentaires, la prise en charge du mode sombre et un minimum d’éléments.
Composants de mise en page Composant 40
Un composant de mise en page réactif avec des micro-interactions avec des animations attrayantes. Il comprend une structure de carte avec des interactions utilisateur telles que des effets de survol, une mise à l’échelle et des ajustements de thème sombre.
Composant de mise en page en mode sombre
Un composant de mise en page réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Comprend un en-tête, une zone de contenu et un pied de page simples. Le mode sombre est géré par le préfixe 'dark :' dans les classes Tailwind.