ダークモードポートフォリオレイアウト
ポートフォリオ用のダークモードレスポンシブレイアウトコンポーネントで、Tailwind CSS を使用したモノクロの配色が特徴です。コンテンツのプレースホルダーが含まれており、JavaScript を使用しない場合の適度な複雑さに対応するように設計されています。
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>関連コンポーネント
サイバーパンク音楽プレーヤーのレイアウト
サイバーパンクをテーマにした音楽プレーヤーのレイアウトは、近未来的なネオンの美学、暗い背景、鮮やかなアクセントカラーを備え、応答性とダークモードのサポートのために設計されています。
Glassmorphismビジネスレイアウト
アース トーンを特徴とする、Tailwind CSS を使用したダーク モードをサポートする、シンプルで応答性の高い glassmorphism レイアウト コンポーネント。