Tab Component Generator

<div class="tabs-container">
  <div class="tabs-list" role="tablist" aria-label="Tabs">
    <button
      class="tab-button active"
      role="tab"
      id="tab-0"
      aria-selected="true"
      aria-controls="panel-0"
      tabindex="0"
    >
      <span class="tab-icon">📊</span>Dashboard
    </button>
    <button
      class="tab-button"
      role="tab"
      id="tab-1"
      aria-selected="false"
      aria-controls="panel-1"
      tabindex="-1"
    >
      <span class="tab-icon">👤</span>Profile
    </button>
    <button
      class="tab-button"
      role="tab"
      id="tab-2"
      aria-selected="false"
      aria-controls="panel-2"
      tabindex="-1"
    >
      <span class="tab-icon">⚙️</span>Settings
    </button>
    <button
      class="tab-button"
      role="tab"
      id="tab-3"
      aria-selected="false"
      aria-controls="panel-3"
      tabindex="-1"
    >
      <span class="tab-icon">💬</span>Messages
    </button>
  </div>
  <div class="tabs-content">
    <div
      class="tab-panel"
      role="tabpanel"
      id="panel-0"
      aria-labelledby="tab-0"
      
    >
      Welcome to your dashboard. Here you can view your overview, recent activity, and quick stats.
    </div>
    <div
      class="tab-panel"
      role="tabpanel"
      id="panel-1"
      aria-labelledby="tab-1"
      hidden
    >
      Manage your profile settings, update your information, and customize your preferences.
    </div>
    <div
      class="tab-panel"
      role="tabpanel"
      id="panel-2"
      aria-labelledby="tab-2"
      hidden
    >
      Configure your application settings, notifications, and privacy options.
    </div>
    <div
      class="tab-panel"
      role="tabpanel"
      id="panel-3"
      aria-labelledby="tab-3"
      hidden
    >
      View and manage your messages, conversations, and notifications.
    </div>
  </div>
</div>