検索コンポーネント

カテゴリ

タブ

同じエリア内の異なるコンテンツを切り替える

スキューモーフィックタブコンポーネント

Tailwind CSSを利用して現実世界のデザイン要素を模倣し、スキューモーフィズムでスタイル化されたレスポンシブタブコンポーネント。これには、ダークテーマのサポートとプレースホルダー画像が含まれます。

                <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>

検索コンポーネント

カテゴリ

タブ

スキューモーフィック タブ コンポーネント

スキューモーフィックタブコンポーネント