Componente de pestañas de modo oscuro

<div class="bg-gray-900 text-white rounded-lg p-4">
  <div class="flex space-x-2">
    <button class="tab-button active bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 1</button>
    <button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 2</button>
    <button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 3</button>
  </div>
  <div class="tab-content mt-4">
    <div class="content active">
      <h2 class="text-lg font-semibold">Content for Tab 1</h2>
      <img src="https://picsum.photos/400/200?random=1" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">This is the content for the first tab. Here you can add more information, images, etc.</p>
    </div>
    <div class="content hidden">
      <h2 class="text-lg font-semibold">Content for Tab 2</h2>
      <img src="https://picsum.photos/400/200?random=2" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">This is the content for the second tab. More details can be added here.</p>
    </div>
    <div class="content hidden">
      <h2 class="text-lg font-semibold">Content for Tab 3</h2>
      <img src="https://picsum.photos/400/200?random=3" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">Here is the content for the third tab, where additional insights can be included.</p>
    </div>
  </div>
</div>
<style>
  .tab-button.active {
    background-color: #1f2937;
    border: 1px solid #4b5563;
  }
  .tab-button:hover {
    background-color: #374151;
  }
  .content.hidden {
    display: none;
  }
  .content.active {
    display: block;
  }
</style>