ヘッダーコンポーネント
ブログやコンテンツサイト用のパステルカラースキームを備えたブルータリズムスタイルでデザインされたレスポンシブヘッダーコンポーネントで、ダークテーマのサポートが組み込まれています。
HTMLコード
<header class="bg-pastel-100 dark:bg-gray-800 p-6 flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
<h1 class="text-xl font-bold text-gray-900 dark:text-white">My Blog</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
</nav>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-900 dark:text-white">Username</span>
</div>
</header>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* Define pastel colors */
.bg-pastel-100 {
background-color: #F9D7C1;
}
}
</style>関連コンポーネント
レトロビンテージヘッダーコンポーネント
レトロ/ビンテージなデザインスタイルのレスポンシブヘッダーコンポーネントで、ダークモードと80年代と90年代にインスパイアされたノスタルジックな美学をサポートしています。
スキューモーフィックヘッダーコンポーネント
スキューモーフィックスタイルのeコマースWebサイト向けに設計されたシンプルでレスポンシブなヘッダーコンポーネントで、グレースケールの配色を使用し、ダークモードをサポートします。