选项卡组件

<div class="font-mono bg-amber-200 text-purple-900 min-h-screen p-8 dark:bg-purple-900 dark:text-amber-200">
  <div class="max-w-4xl mx-auto border-4 border-purple-900 dark:border-amber-200">
    <!-- Brutalist Header/Title -->
    <h1 class="text-5xl font-extrabold p-4 bg-purple-900 text-amber-200 text-center uppercase tracking-widest border-b-4 border-amber-200 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900">
      Social Feed
    </h1>

    <!-- Tabs Navigation -->
    <div class="flex border-b-4 border-purple-900 dark:border-amber-200">
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Latest</span>
      </button>
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Popular</span>
      </button>
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase bg-amber-300 hover:bg-amber-400 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Friends</span>
      </button>
    </div>

    <!-- Tab Content Area -->
    <div class="p-4 space-y-8">
      <!-- Example Post 1 -->
      <div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
        
        <div class="relative z-10 flex items-start space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
          <div>
            <p class="text-3xl font-extrabold uppercase">@PixelPunk</p>
            <p class="text-lg">2 hours ago</p>
          </div>
        </div>
        <p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
          Just dropped my new brutalist-inspired digital art piece! Check it out and tell me what you think. #BrutalArt #DigitalDesign #NewWork
        </p>
        <img src="https://picsum.photos/id/1040/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
        <div class="flex justify-between items-center text-lg">
          <span class="font-bold">1.2K Likes</span>
          <a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
            Comment
          </a>
        </div>
      </div>

      <!-- Example Post 2 -->
      <div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
        
        <div class="relative z-10 flex items-start space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
          <div>
            <p class="text-3xl font-extrabold uppercase">@CodeCrusher</p>
            <p class="text-lg">4 hours ago</p>
          </div>
        </div>
        <p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
          Just finished coding a new brutalist UI for my dev portfolio. Loving the raw, unrefined aesthetic! #WebDev #BrutalistUI #CodingLife
        </p>
        <img src="https://picsum.photos/id/1043/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
        <div class="flex justify-between items-center text-lg">
          <span class="font-bold">987 Likes</span>
          <a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
            Comment
          </a>
        </div>
      </div>
    </div>
  </div>
</div>