Brutalist ヘッダーコンポーネント
Tailwind CSSでデザインされた生で大胆なヘッダーコンポーネントで、明るいテーマと暗いテーマの両方に適した高コントラストと珍しいレイアウトが特徴です。
HTMLコード
<header class="bg-gray-900 text-white p-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50" alt="Logo" class="w-16 h-16 rounded-full border-4 border-yellow-500">
<h1 class="text-3xl font-bold">Brutalist Header</h1>
</div>
<nav class="flex space-x-6">
<a href="#" class="text-yellow-300 hover:underline">Home</a>
<a href="#" class="text-yellow-300 hover:underline">About</a>
<a href="#" class="text-yellow-300 hover:underline">Services</a>
<a href="#" class="text-yellow-300 hover:underline">Contact</a>
</nav>
</div>
<div class="mt-4 pt-4 border-t border-yellow-500 flex flex-col space-y-2">
<h2 class="text-xl font-bold">Welcome to the Brutalist World</h2>
<p class="text-sm">This is a header component that embodies the raw and bold aesthetics of Brutalism.</p>
</div>
</header>
<style>
@media (prefers-color-scheme: dark) {
header {
background-color: #1c1917;
color: #f9fafb;
}
a {
color: #fbbf24;
}
}
</style>