选项卡组件

<div class="bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-950 p-8 rounded-xl shadow-2xl m-4
            font-sans text-gray-800 dark:text-gray-200">

  <div class="flex border-b-2 border-gray-300 dark:border-gray-700 mb-6 space-x-2">
    <!-- Tab 1 Button -->
    <input type="radio" name="tabs" id="tab1" class="hidden" checked>
    <label for="tab1" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Company Profile
    </label>

    <!-- Tab 2 Button -->
    <input type="radio" name="tabs" id="tab2" class="hidden">
    <label for="tab2" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Our Services
    </label>

    <!-- Tab 3 Button -->
    <input type="radio" name="tabs" id="tab3" class="hidden">
    <label for="tab3" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Contact Us
    </label>
  </div>

  <!-- Tab Content 1 -->
  <div role="tabpanel" aria-labelledby="tab1" class="tab-content" id="content1">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">About Our Company</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      Founded in 2005, we have grown into a leading innovator in sustainable energy solutions.
      Our commitment to excellence and customer satisfaction drives us to deliver cutting-edge technologies.
      We believe in a future powered by clean, renewable resources, and we are dedicated to making that a reality.
    </p>
    <img src="https://picsum.photos/id/150/800/400" alt="Modern Office Building" class="rounded-lg shadow-xl mb-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Mission</h3>
        <p class="text-gray-600 dark:text-gray-400">To empower businesses and communities with reliable,
          eco-friendly energy alternatives, fostering a greener planet for generations to come.</p>
      </div>
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Vision</h3>
        <p class="text-gray-600 dark:text-gray-400">To be the global leader in renewable energy, recognized for our
          innovation, integrity, and significant positive impact on the environment.</p>
      </div>
    </div>
  </div>

  <!-- Tab Content 2 -->
  <div role="tabpanel" aria-labelledby="tab2" class="tab-content hidden" id="content2">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">Comprehensive Service Portfolio</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      We offer a wide array of services designed to meet the diverse needs of our clients,
      from initial consultation and system design to installation and ongoing maintenance.
      Our solutions are tailored to maximize efficiency and deliver sustainable results.
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Solar Solutions</h3>
        <p class="text-gray-600 dark:text-gray-400">Residential and commercial solar panel installation and maintenance.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Wind Energy Consulting</h3>
        <p class="text-gray-600 dark:text-gray-400">Site assessment, turbine selection, and project management.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Energy Audits</h3>
        <p class="text-gray-600 dark:text-gray-400">Thorough analysis to identify energy inefficiencies and recommend improvements.</p>
      </div>
    </div>
    <img src="https://picsum.photos/id/152/800/400" alt="Renewable Energy Solutions" class="rounded-lg shadow-xl">
  </div>

  <!-- Tab Content 3 -->
  <div role="tabpanel" aria-labelledby="tab3" class="tab-content hidden" id="content3">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">Connect With Us</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      We are always eager to hear from you. Whether you have a question, a project inquiry, or just want to chat,
      our team is ready to assist. Reach out to us through the methods below!
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Office</h3>
        <p class="text-gray-600 dark:text-gray-400">123 Eco-Friendly Lane, Green City, GC 12345</p>
        <p class="text-gray-600 dark:text-gray-400">United States</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Get in Touch</h3>
        <p class="text-gray-600 dark:text-gray-400">Email: <a href="mailto:[email protected]"
                                                              class="text-amber-600 dark:text-amber-400 hover:underline">[email protected]</a></p>
        <p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
      </div>
    </div>
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Service Representative"
           class="w-20 h-20 rounded-full shadow-lg border-4 border-amber-400 dark:border-amber-500">
      <div>
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe, Lead Representative</p>
        <p class="text-gray-600 dark:text-gray-400">"We're here to help you power your future."</p>
      </div>
    </div>
  </div>

</div>

<style>
  /* Base styling for the tab content - hidden by default */
  .tab-content {
    display: none;
  }

  /* Show the content associated with the checked radio button */
  input[name="tabs"]:checked + label + .tab-content {
    display: block;
  }

  /* If using sibling combinator for tab content not directly adjacent */
  input#tab1:checked ~ #content1,
  input#tab2:checked ~ #content2,
  input#tab3:checked ~ #content3 {
    display: block;
  }
</style>