タブコンポーネント
アースカラーとビジネスWebサイト向けのマイクロインタラクションを備えたレスポンシブタブコンポーネントで、Tailwind CSSを使用したダークモードをサポートします。HTML クラスと Tailwind クラスのみを使用します。
HTMLコード
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-md">
<div class="flex justify-center">
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tl-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-state="active" data-tab="tab1">
About Us
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab2">
Our Services
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tr-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab3">
Contact
</button>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-b-lg shadow-md">
<div data-tab-content="tab1">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Our Company Story</h2>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="https://picsum.photos/400/200" alt="Company Image" class="mt-4 rounded-md">
</div>
<div class="hidden" data-tab-content="tab2">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">What We Offer</h2>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300">
<li>Consulting Services</li>
<li>Development & Design</li>
<li>Marketing Solutions</li>
</ul>
<img src="https://picsum.photos/400/201" alt="Services Image" class="mt-4 rounded-md">
</div>
<div class="hidden" data-tab-content="tab3">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Get in Touch</h2>
<p class="text-gray-600 dark:text-gray-300">Email: [email protected]</p>
<p class="text-gray-600 dark:text-gray-300">Phone: (123) 456-7890</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="text-gray-800 dark:text-white">John Doe, CEO</p>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
Glassmorphism タブ コンポーネント
ポートフォリオ用のシンプルなGlassmorphismタブコンポーネントで、レスポンシブデザインとダークテーマがサポートされています。鮮やかな配色を使用。
タブコンポーネント
マテリアルデザインのスタイル設定、単色の配色、ダークテーマのサポートを備えたレスポンシブタブコンポーネントで、コンテンツの多いWebサイト向けにTailwind CSSで構築されています。