User Mentions Component

<div class="container mx-auto px-4 py-8 theme-changer and dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- User Mention Card -->
    <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-purple-500 dark:border-purple-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">Rad RetroDude86</h3>
          <p class="text-gray-600 dark:text-gray-300">Active Shopper</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4">
        Just bought the awesome ' totally tubular ' t-shirt! This store is maximum cool! #retrofashion #ecommercewin
      </p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
        <span>Mentioned Product &hearts;</span>
        <img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retroshirt/150/150" alt="Product Image">
      </div>
    </div>

    <!-- User Mention Card eo --> 
    
        <!-- User Mention Card -->
    <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-yellow-500 dark:border-yellow-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
        <div>
          <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">NeonLightsQueen</h3>
          <p class="text-gray-600 dark:text-gray-300">New Arrival Enthusiast</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4">
        OMG, the new accessories are so fetch!  Totally loving the vibe.  Can't wait for more! #80sstyle #shopaholic
      </p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
        <span>Mentioned Product &hearts;</span>
        <img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retrobag/150/150" alt="Product Image">
      </div>
    </div>

    <!-- User Mention Card eo --> 
    
        <!-- User Mention Card -->
    <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-green-500 dark:border-green-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div>
          <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">SynthwaveSam</h3>
          <p class="text-gray-600 dark:text-gray-300">Vinyl Collector</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4">
        Scored some classic vinyls from here.  Sounding totally rad on my setup!  Highly recommend! #vinylcollection #musiconline
      </p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
        <span>Mentioned Product &hearts;</span>
        <img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retroviny/150/150" alt="Product Image">
      </div>
    </div>

    <!-- User Mention Card eo --> 

  </div>
</div>