User Mentions Component

<div class="container mx-auto p-6">
  <div class="glassmorphism-container rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold mb-6">User Mentions</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- User Mention Card 1 -->
      <div class="glassmorphism-card p-4 rounded-lg mb-4">
        <div class="flex items-center">
          <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-semibold">John Doe</h3>
            <p class="text-sm opacity-75">@johndoe</p>
          </div>
        </div>
        <p class="mt-4 text-sm">"This product is amazing! Highly recommend it."</p>
        <div class="flex justify-end mt-4">
          <button class="glassmorphism-button py-2 px-4 rounded-lg text-sm">View Profile</button>
        </div>
      </div>

      <!-- User Mention Card 2 -->
      <div class="glassmorphism-card p-4 rounded-lg mb-4">
        <div class="flex items-center">
          <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-semibold">Jane Smith</h3>
            <p class="text-sm opacity-75">@janesmith</p>
          </div>
        </div>
        <p class="mt-4 text-sm">"Fast shipping and great customer service."</p>
        <div class="flex justify-end mt-4">
          <button class="glassmorphism-button py-2 px-4 rounded-lg text-sm">View Profile</button>
        </div>
      </div>

      <!-- More User Mention Cards (add as needed) -->

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

<style>
/* Glassmorphism Styles */
.glassmorphism-container {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glassmorphism-container {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.glassmorphism-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark .glassmorphism-card {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.glassmorphism-button {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: background-color 0.3s ease;
}

.dark .glassmorphism-button {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.7);
}

.glassmorphism-button:hover {
  background: rgba(255, 255, 255, 0.8);
}

.dark .glassmorphism-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Pastel Colors (adjust as needed with Tailwind classes) */
/* Example: Use classes like text-pink-300, bg-blue-100, etc. */

/* Dark Mode */
.dark body {
  background-color: #1a202c;
  color: #e2e8f0;
}

.dark .text-xl,
.dark .text-sm,
.dark .opacity-75 {
  color: #e2e8f0;
}
</style>