Komponente "Soziale Komponenten"

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <!-- Social Components Component -->
  <div class="max-w-4xl w-full bg-red-400 dark:bg-red-800 border-4 border-black dark:border-white shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] p-8 space-y-8">
    
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row justify-between items-center border-b-4 border-black dark:border-white pb-4">
      <h1 class="text-5xl font-extrabold text-black dark:text-white uppercase tracking-tighter mb-4 sm:mb-0">Social Feed</h1>
      <div class="flex space-x-4">
        <button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">New Post</button>
        <button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Profile</button>
      </div>
    </div>

    <!-- Main Content Area - Grid Layout for Posts -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Social Post Card 1 -->
      <div class="bg-green-400 dark:bg-green-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">Jane Doe</h2>
            <p class="text-black dark:text-white text-sm">2 hours ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/237/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Absolutely loving this new collection! The colors are so vibrant and the quality is superb. Perfect for my e-commerce store."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 124 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 36 Comments</button>
          </div>
          <button class="bg-purple-400 dark:bg-purple-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-purple-500 dark:hover:bg-purple-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 2 -->
      <div class="bg-yellow-400 dark:bg-yellow-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">John Smith</h2>
            <p class="text-black dark:text-white text-sm">5 hours ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1018/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Just received my order and I'm blown away! The design is so unique and the product feels incredibly durable. Highly recommend for any e-commerce business."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 289 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 78 Comments</button>
          </div>
          <button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 3 -->
      <div class="bg-blue-400 dark:bg-blue-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">Emily White</h2>
            <p class="text-black dark:text-white text-sm">1 day ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1025/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Selling like hotcakes! My customers can't get enough of these amazing products. The brutalist design elements really make my e-commerce site stand out."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 512 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 112 Comments</button>
          </div>
          <button class="bg-green-400 dark:bg-green-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-green-500 dark:hover:bg-green-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 4 -->
      <div class="bg-purple-400 dark:bg-purple-700 border-4 border-black dark:border-white p-6 shadow-[6px_6_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">David Lee</h2>
            <p class="text-black dark:text-white text-sm">3 days ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1040/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Fantastic addition to my product lineup. The aesthetic is so unique and powerful, perfect for attracting attention on my e-commerce platform."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 345 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 98 Comments</button>
          </div>
          <button class="bg-red-400 dark:bg-red-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-red-500 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
      </div>

    </div>

    <!-- Call to Action / Footer Section -->
    <div class="flex flex-col sm:flex-row justify-between items-center border-t-4 border-black dark:border-white pt-8">
      <p class="text-2xl text-black dark:text-white font-bold mb-4 sm:mb-0">Explore more products on our store!</p>
      <button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-8 py-4 border-4 border-black dark:border-white text-2xl font-bold uppercase shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">Shop Now</button>
    </div>

  </div>
</div>