Luxury Tabs 구성 요소

<div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
    <!-- Tabs Navigation -->
    <div class="flex-none w-full md:w-56 bg-emerald-700 dark:bg-emerald-900 rounded-lg p-2 shadow-inner">
      <nav class="flex md:flex-col space-x-2 md:space-x-0 md:space-y-2" role="tablist">
        <button
          class="flex-1 md:flex-none py-3 px-4 text-sm font-semibold rounded-md text-emerald-100 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-700 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-white"
          role="tab"
          aria-selected="true"
          data-state="active"
          tabindex="0"
          id="tab-1"
          aria-controls="panel-1"
        >
          Strategic Planning
        </button>
        <button
          class="flex-1 md:flex-none py-3 px-4 text-sm font-semibold rounded-md text-emerald-100 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-700 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-white"
          role="tab"
          aria-selected="false"
          data-state="inactive"
          tabindex="-1"
          id="tab-2"
          aria-controls="panel-2"
        >
          Market Analysis
        </button>
        <button
          class="flex-1 md:flex-none py-3 px-4 text-sm font-semibold rounded-md text-emerald-100 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-700 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-white"
          role="tab"
          aria-selected="false"
          data-state="inactive"
          tabindex="-1"
          id="tab-3"
          aria-controls="panel-3"
        >
          Financial Advisory
        </button>
      </nav>
    </div>

    <!-- Tabs Content -->
    <div class="flex-auto bg-gray-50 dark:bg-gray-800 rounded-lg p-6 shadow-md text-gray-800 dark:text-gray-200">
      <div
        role="tabpanel"
        id="panel-1"
        aria-labelledby="tab-1"
        tabindex="0"
        class="space-y-4 data-[state=active]:block data-[state=inactive]:hidden"
        data-state="active"
      >
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300">Strategic Planning Excellence</h3>
        <p class="text-lg leading-relaxed">
          Our expert consultants work closely with your leadership to develop robust, forward-thinking strategies that propel your organization toward its long-term goals. We combine in-depth analysis with actionable insights to create a roadmap for sustainable growth and competitive advantage.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Vision & Mission Alignment</li>
          <li>Goal Setting & KPI Development</li>
          <li>Resource Allocation Optimization</li>
          <li>Risk Assessment & Mitigation</li>
        </ul>
        <img src="https://picsum.photos/600/350?random=1" alt="Strategic Planning Meeting" class="mt-4 rounded-lg shadow-lg w-full object-cover" loading="lazy">
      </div>

      <div
        role="tabpanel"
        id="panel-2"
        aria-labelledby="tab-2"
        tabindex="0"
        class="space-y-4 data-[state=active]:block data-[state=inactive]:hidden hidden"
        data-state="inactive"
      >
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300">In-Depth Market Analysis</h3>
        <p class="text-lg leading-relaxed">
          Gain a comprehensive understanding of your market landscape, customer behaviors, and competitor strategies. Our detailed market analysis provides the intelligence you need to identify new opportunities, mitigate threats, and make informed business decisions.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Competitor Benchmarking</li>
          <li>Customer Segmentation & Insights</li>
          <li>Industry Trend Forecasting</li>
          <li>SWOT Analysis</li>
        </ul>
        <img src="https://picsum.photos/600/350?random=2" alt="Market Analysis Charts" class="mt-4 rounded-lg shadow-lg w-full object-cover" loading="lazy">
      </div>

      <div
        role="tabpanel"
        id="panel-3"
        aria-labelledby="tab-3"
        tabindex="0"
        class="space-y-4 data-[state=active]:block data-[state=inactive]:hidden hidden"
        data-state="inactive"
      >
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300">Robust Financial Advisory</h3>
        <p class="text-lg leading-relaxed">
          Secure your financial future with our expert advisory services. From capital management to investment strategies and risk management, we provide tailored financial guidance designed to optimize your financial health and achieve your fiscal objectives.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Investment Strategy Development</li>
          <li>Capital Structure Optimization</li>
          <li>Mergers & Acquisitions Support</li>
          <li>Due Diligence & Valuation</li>
        </ul>
        <img src="https://picsum.photos/600/350?random=3" alt="Financial Advisory Chart" class="mt-4 rounded-lg shadow-lg w-full object-cover" loading="lazy">
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('[role="tab"]');
    const tabPanels = document.querySelectorAll('[role="tabpanel"]');

    tabs.forEach(tab => {
      tab.addEventListener('click', (e) => {
        const targetId = e.currentTarget.id;
        const targetPanelId = e.currentTarget.getAttribute('aria-controls');

        // Deactivate all tabs and hide all panels
        tabs.forEach(t => {
          t.setAttribute('aria-selected', 'false');
          t.setAttribute('tabindex', '-1');
          t.dataset.state = 'inactive';
        });
        tabPanels.forEach(p => {
          p.dataset.state = 'inactive';
          p.classList.add('hidden');
        });

        // Activate the clicked tab and show its panel
        e.currentTarget.setAttribute('aria-selected', 'true');
        e.currentTarget.setAttribute('tabindex', '0');
        e.currentTarget.dataset.state = 'active';
        document.getElementById(targetPanelId).dataset.state = 'active';
        document.getElementById(targetPanelId).classList.remove('hidden');
      });
    });
  });
</script>