タブコンポーネント
マテリアルデザインのスタイル設定、単色の配色、ダークテーマのサポートを備えたレスポンシブタブコンポーネントで、コンテンツの多いWebサイト向けにTailwind CSSで構築されています。
HTMLコード
<div class="max-w-4xl mx-auto my-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex border-b border-gray-200 dark:border-gray-700">
<button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
Recent Posts
</button>
<button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
Categories
</button>
<button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
Authors
</button>
</div>
<div class="p-6">
<!-- Content for 'Recent Posts' tab -->
<div class="space-y-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">A Guide to Responsive Web Design</h3>
<p class="text-gray-700 dark:text-gray-300">Learn the fundamentals of creating websites that adapt seamlessly to various screen sizes and devices.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<span>John Doe</span>
<span class="mx-2">•</span>
<span>October 26, 2023</span>
</div>
<hr class="border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Understanding CSS Grid Layout</h3>
<p class="text-gray-700 dark:text-gray-300">Explore the power and flexibility of CSS Grid for building complex two-dimensional layouts.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
<span>Jane Smith</span>
<span class="mx-2">•</span>
<span>October 20, 2023</span>
</div>
</div>
<!-- Content for 'Categories' tab (hidden by default, would be shown with JS) -->
<!-- <div class="space-y-4 hidden">
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
<li>Technology</li>
<li>Programming</li>
<li>Design</li>
<li>Lifestyle</li>
</ul>
</div> -->
<!-- Content for 'Authors' tab (hidden by default, would be shown with JS) -->
<!-- <div class="space-y-4 hidden">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/men/76.jpg" alt="Author Avatar">
<div>
<p class="font-semibold text-gray-900 dark:text-white">David Lee</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Content Creator</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/women/65.jpg" alt="Author Avatar">
<div>
<p class="font-semibold text-gray-900 dark:text-white">Sarah Chen</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Tech Enthusiast</p>
</div>
</div>
</div> -->
</div>
</div>
</div>関連コンポーネント
マテリアル デザイン タブ
マテリアルデザインスタイル、レスポンシブエフェクト、およびTailwind CSSを使用したダークテーマをサポートするタブコンポーネントで、JavaScriptなし。
タブコンポーネント
アースカラーとビジネスWebサイト向けのマイクロインタラクションを備えたレスポンシブタブコンポーネントで、Tailwind CSSを使用したダークモードをサポートします。HTML クラスと Tailwind クラスのみを使用します。
スキューモーフィック タブ コンポーネント
Tailwind CSSを利用して現実世界のデザイン要素を模倣し、スキューモーフィズムでスタイル化されたレスポンシブタブコンポーネント。これには、ダークテーマのサポートとプレースホルダー画像が含まれます。