<!-- HTML Code with Tailwind & Alpine.js -->
<div
class="team-members bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 shadow-xl border border-gray-700 backdrop-filter backdrop-blur-sm relative overflow-hidden"
x-data="{
members: [
{ id: 1, name: 'John Doe', role: 'Frontend Developer', email: 'john@example.com', avatar: 'https://i.pravatar.cc/150?img=1', color: 'blue', status: 'Active' },
{ id: 2, name: 'Chris Smith', role: 'Backend Engineer', email: 'chris@example.com', avatar: 'https://i.pravatar.cc/150?img=2', color: 'purple', status: 'Away' },
{ id: 3, name: 'Jasmine Lee', role: 'UI/UX Designer', email: 'jasmine@example.com', avatar: 'https://i.pravatar.cc/150?img=3', color: 'green', status: 'Offline' }
],
hoveredMember: null,
showDropdown: null,
newInvite: false,
openDropdown(memberId) {
// Force a small delay to ensure event propagation doesn't interfere
setTimeout(() => {
// If clicking the same dropdown that's already open, close it
if (this.showDropdown === memberId) {
this.showDropdown = null;
} else {
// Otherwise, close any open dropdown and open the clicked one
this.showDropdown = memberId;
}
}, 10);
}
}"
>
<!-- Decorative Elements -->
<div class="absolute top-0 right-0 w-64 h-64 bg-blue-500 rounded-full filter blur-3xl opacity-10 -mr-20 -mt-20"></div>
<div class="absolute bottom-0 left-0 w-64 h-64 bg-purple-500 rounded-full filter blur-3xl opacity-10 -ml-20 -mb-20"></div>

<div class="relative">
<div class="flex items-center justify-between mb-8">
<div>
<h3 class="text-white text-xl font-bold flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-400" viewBox="0 0 20 20" fill="currentColor">
  <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
</svg>
Team members
</h3>
<p class="text-gray-400 mt-1">Invite your teammates to manage this project.</p>
</div>
<span class="bg-indigo-900/50 text-indigo-300 text-xs px-3 py-1.5 rounded-full border border-indigo-800/50 flex items-center">
<span x-text="members.length" class="font-semibold mr-1"></span> members
<span class="relative flex h-2 w-2 ml-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
</span>
</span>
</div>

<div class="members-list space-y-4  pr-2">
<!-- Member list -->
<template x-for="member in members" :key="member.id">
<div
class="member-item flex items-center justify-between py-4 px-5 rounded-xl transition-all duration-300 ease-in-out border border-transparent"
:class="{
  'bg-gradient-to-r from-gray-800 to-gray-700 border-gray-600 shadow-lg transform scale-[1.02]': hoveredMember === member.id,
  'hover:bg-gray-800/60': hoveredMember !== member.id
}"
@mouseenter="hoveredMember = member.id"
@mouseleave="hoveredMember = null"
>
<div class="flex items-center">
  <div class="relative">
    <div class="relative">
      <img :src="member.avatar" class="h-12 w-12 rounded-lg object-cover"
          :class="'ring-2 ring-'+member.color+'-400 ring-offset-2 ring-offset-gray-800'" :alt="member.name" />
      <div
        class="absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300"
        :class="{ 'opacity-20 animate-ping': hoveredMember === member.id, ['bg-'+member.color+'-400']: true }"
      ></div>
    </div>
    <div class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full border-2 border-gray-800"
        :class="{
          'bg-green-400': member.status === 'Active',
          'bg-yellow-400': member.status === 'Away',
          'bg-gray-400': member.status === 'Offline'
        }">
    </div>
  </div>
  <div class="ml-4">
    <div class="flex items-center">
      <p class="text-white text-sm font-medium" x-text="member.name"></p>
      <span
        x-show="hoveredMember === member.id"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-50"
        x-transition:enter-end="opacity-100 scale-100"
        :class="'ml-2 text-xs px-1.5 py-0.5 rounded-md bg-'+member.color+'-900/60 text-'+member.color+'-300 border border-'+member.color+'-800/50'"
        x-text="member.status"
      ></span>
    </div>
    <p class="text-gray-400 text-xs mt-0.5" x-text="member.role"></p>
    <p class="text-gray-500 text-xs mt-0.5" x-text="member.email"></p>
  </div>
</div>

<div class="relative">
  <button
    class="text-gray-400 hover:text-white transition-colors duration-200 bg-gray-800/60 hover:bg-gray-700 p-2 rounded-lg"
    @click.stop.prevent="openDropdown(member.id)"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
    </svg>
  </button>

  <!-- Dropdown Menu -->
  <div
    x-show="showDropdown === member.id"
    @click.outside="showDropdown = null"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-100"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-95"
    class="absolute right-0 mt-2 w-48 rounded-lg shadow-lg bg-gray-800 border border-gray-700 z-50"
    style="position: absolute; right: 0; bottom: 100%; margin-bottom: 5px; z-index: 60;"
  >
    <div class="py-1">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
        </svg>
        Edit member
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        View activity
      </a>
      <div class="border-t border-gray-700"></div>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-red-400 hover:bg-gray-700 hover:text-red-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
        </svg>
        Remove member
      </a>
    </div>
  </div>
</div>
</div>
</template>

<!-- New Invite Animation -->
<div
x-show="newInvite"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-4"
x-transition:enter-end="opacity-100 transform translate-y-0"
class="mt-4 member-item flex items-center justify-between py-4 px-5 rounded-xl bg-gray-800/40 border border-dashed border-gray-600"
>
<div class="flex items-center w-full">
<div class="animate-pulse">
  <div class="h-12 w-12 rounded-lg bg-gray-700"></div>
</div>
<div class="ml-4 flex-1">
  <div class="h-4 w-24 bg-gray-700 rounded animate-pulse"></div>
  <div class="h-3 w-32 bg-gray-700 rounded mt-2 animate-pulse"></div>
</div>
<div>
  <div class="h-8 w-20 bg-gray-700 rounded animate-pulse"></div>
</div>
</div>
</div>
</div>

<div class="flex items-center mt-8">
<button
class="bg-gradient-to-r from-indigo-600 to-indigo-800 hover:from-indigo-700 hover:to-indigo-900 text-white px-5 py-2.5 rounded-lg text-sm font-medium transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg flex items-center space-x-2 relative overflow-hidden group"
@click="newInvite = true; setTimeout(() => newInvite = false, 3000)"
>
<span class="absolute top-0 left-0 w-full h-full bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-in-out"></span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z" />
</svg>
<span>Invite member</span>
</button>

<a href="#" class="ml-4 text-indigo-400 hover:text-indigo-300 text-sm flex items-center transition-all duration-200 hover:translate-x-1">
<span>View all</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>