タブコンポーネント

<div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-gray-800 dark:bg-gray-950 rounded-lg shadow-xl overflow-hidden">
      <div class="flex border-b border-gray-700 dark:border-gray-700">
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-cyan-400 dark:text-cyan-500 border-b-2 border-cyan-400 dark:border-cyan-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Featured Articles
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-purple-400 dark:text-purple-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Popular Posts
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-fuchsia-400 dark:text-fuchsia-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Latest News
        </button>
      </div>

      <div class="p-6 md:p-8">
        <!-- Tab Content 1: Featured Articles -->
        <div class="space-y-8">
          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article1/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Future of AI in Content Creation</h3>
                <p class="text-gray-300 text-base leading-relaxed">Explore how artificial intelligence is revolutionizing the way we create and consume digital content, from automated writing to personalized recommendations.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
                <span>John Doe • 2 hours ago</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article2/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">Mastering Responsive Design with Tailwind CSS</h3>
                <p class="text-gray-300 text-base leading-relaxed">Dive deep into the utility-first CSS framework and learn how to build stunning, responsive web interfaces with ease and efficiency.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
                <span>Jane Smith • Yesterday</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article3/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Art of Storytelling in Digital Media</h3>
                <p class="text-gray-300 text-base leading-relaxed">Uncover the timeless principles of captivating narratives and how they apply to modern digital platforms and content forms.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
                <span>Peter Jones • 3 days ago</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>