スキューモーフィック タブ コンポーネント
Tailwind CSSを利用して現実世界のデザイン要素を模倣し、スキューモーフィズムでスタイル化されたレスポンシブタブコンポーネント。これには、ダークテーマのサポートとプレースホルダー画像が含まれます。
HTMLコード
<div class="flex flex-col w-full max-w-md mx-auto p-4">
<div class="tabs flex space-x-2">
<button class="tab px-4 py-2 font-semibold text-white bg-gray-800 rounded-lg shadow-lg focus:outline-none ">Tab 1</button>
<button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 2</button>
<button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 3</button>
</div>
<div class="tab-content mt-4 p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<div class="text-gray-700 dark:text-gray-300">
<h2 class="font-bold text-lg">Tab 1 Content</h2>
<p>This section contains information related to Tab 1.</p>
<img class="mt-2 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" />
</div>
</div>
</div>
</div>
<style>
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.bg-gray-800 { background-color: #2d3748; }
.bg-gray-200 { background-color: #4a5568; }
.text-gray-700 { color: #cbd5e0; }
}
</style>
関連コンポーネント
タブコンポーネント
スキューモーフィックデザイン、類似の配色、ダークテーマのサポートを備えたレスポンシブタブコンポーネントで、プロフェッショナルなビジネスWebサイトに適しています。このコンポーネントは、スタイル設定に Tailwind CSS を使用し、JavaScript は含まれていません。