User Profiles Component

<div class="bg-gray-950 min-h-screen text-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-zinc-950">
  <div class="container mx-auto max-w-7xl">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-white mb-8 sm:mb-12 text-center">
      Our Featured Foodies
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      
      <!-- User Profile Card 1 -->
      <div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
        <div class="relative h-48 sm:h-56 bg-gradient-to-r from-purple-700 to-indigo-700 dark:from-purple-900 dark:to-indigo-900">
          <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=1" alt="User food background">
          <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
            <img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
          </div>
        </div>
        <div class="p-6 sm:p-8 text-center">
          <h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">Sarah L.</h3>
          <p class="text-gray-300 text-lg sm:text-xl mb-4">Food Blogger & Recipe Creator</p>
          <div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
            <span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Vegan Enthusiast</span>
            <span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Dessert Lover</span>
            <span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Home Cook</span>
          </div>
          <p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"Passionate about plant-based cuisine, I love experimenting with fresh ingredients to create delicious and healthy meals from scratch. My kitchen is my happy place!"</p>
          <a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
            View Recipes
          </a>
        </div>
      </div>

      <!-- User Profile Card 2 -->
      <div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
        <div class="relative h-48 sm:h-56 bg-gradient-to-r from-red-700 to-orange-700 dark:from-red-900 dark:to-orange-900">
          <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=2" alt="User food background">
          <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
            <img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile Picture">
          </div>
        </div>
        <div class="p-6 sm:p-8 text-center">
          <h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">David M.</h3>
          <p class="text-gray-300 text-lg sm:text-xl mb-4">Restaurant Critic & Foodie</p>
          <div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
            <span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Fine Dining</span>
            <span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Street Food</span>
            <span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Traveler</span>
          </div>
          <p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"I travel the world seeking unique culinary experiences, from Michelin-starred restaurants to hidden street food gems. Food is my passion and my adventure!"</p>
          <a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
            Read Reviews
          </a>
        </div>
      </div>

      <!-- User Profile Card 3 -->
      <div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
        <div class="relative h-48 sm:h-56 bg-gradient-to-r from-emerald-700 to-teal-700 dark:from-emerald-900 dark:to-teal-900">
          <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=3" alt="User food background">
          <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
            <img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile Picture">
          </div>
        </div>
        <div class="p-6 sm:p-8 text-center">
          <h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">Jessica P.</h3>
          <p class="text-gray-300 text-lg sm:text-xl mb-4">Baking Expert & Instructor</p>
          <div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
            <span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Pastries</span>
            <span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Bread Making</span>
            <span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Gluten-Free</span>
          </div>
          <p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"There's nothing more satisfying than the smell of freshly baked goods. I love teaching others the joy of baking and sharing my sweetest creations!"</p>
          <a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
            Explore Courses
          </a>
        </div>
      </div>

    </div>
  </div>
</div>