HTML code
This is the html code used to create this tailwind snippet
Download<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Friend List</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen pt-5">
<div class="container mx-auto px-4 max-w-6xl">
<div class="w-full">
<!-- Profile Header -->
<div class="relative overflow-hidden rounded-t-lg">
<!-- Header Cover with gradient overlay -->
<div class="relative h-40 bg-gradient-to-b from-gray-700 to-gray-900 bg-center bg-cover">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/75"></div>
<!-- Profile Header Content -->
<div class="relative text-white px-6 py-6">
<!-- Profile Image -->
<div class="float-left w-32 h-32 overflow-hidden relative z-10 mb-0 -mb-5 p-1 rounded bg-white">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Sean Ngu" class="max-w-full rounded">
</div>
<!-- Profile Info -->
<div class="ml-36">
<h4 class="mt-2.5 mb-1 font-medium text-white">Sean Ngu</h4>
<p class="mb-2.5">UXUI + Frontend Developer</p>
<a href="#" class="inline-block px-3 py-1 text-xs bg-yellow-500 text-gray-900 font-semibold rounded hover:bg-yellow-600 transition">Edit Profile</a>
</div>
</div>
</div>
<!-- Profile Header Tab -->
<ul class="relative bg-white list-none mt-0 mb-0 pl-36 whitespace-nowrap rounded-none flex">
<li class="inline-block m-0">
<a href="#" class="block text-gray-500 leading-5 px-5 py-2.5 no-underline font-bold text-xs hover:text-gray-900 transition">POSTS</a>
</li>
<li class="inline-block m-0">
<a href="#" class="block text-gray-500 leading-5 px-5 py-2.5 no-underline font-bold text-xs hover:text-gray-900 transition">ABOUT</a>
</li>
<li class="inline-block m-0">
<a href="#" class="block text-gray-500 leading-5 px-5 py-2.5 no-underline font-bold text-xs hover:text-gray-900 transition">PHOTOS</a>
</li>
<li class="inline-block m-0">
<a href="#" class="block text-gray-500 leading-5 px-5 py-2.5 no-underline font-bold text-xs hover:text-gray-900 transition">VIDEOS</a>
</li>
<li class="inline-block m-0">
<a href="#" class="block text-gray-900 leading-5 px-5 py-2.5 no-underline font-bold text-xs">FRIENDS</a>
</li>
</ul>
</div>
<!-- Profile Content -->
<div class="px-6 py-6 rounded-b-lg">
<!-- Friend List -->
<div class="p-0">
<div class="bg-transparent">
<h4 class="mt-0 mb-5">Friend List (14)</h4>
<!-- Grid Row -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-0.5">
<!-- Friend 1 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="James Pittman" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">James Pittman</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 2 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Mitchell Ashcroft" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Mitchell Ashcroft</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 3 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Ella Cabena" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Ella Cabena</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 4 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Declan Dyson" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Declan Dyson</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 5 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="George Seyler" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">George Seyler</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 6 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Fred Moss" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Fred Moss</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 7 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Rudy Reyes" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Rudy Reyes</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 8 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Bret Feery" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Bret Feery</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 9 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Mia Maples" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Mia Maples</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 10 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Oliver Barnes" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Oliver Barnes</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 11 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="Sophia Chen" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Sophia Chen</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 12 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Lucas Martinez" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Lucas Martinez</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 13 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Emma Wilson" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Emma Wilson</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Friend 14 -->
<div class="mb-0.5">
<div class="p-2.5 bg-white rounded">
<div class="flex items-center overflow-visible">
<a href="#" class="pr-4 flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Noah Anderson" class="w-8 h-8 rounded-full">
</a>
<div class="flex-1 flex items-center">
<span class="font-semibold text-gray-900">Noah Anderson</span>
</div>
<div class="flex items-center text-right overflow-visible ml-auto">
<div class="relative inline-block group">
<button class="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-l border-r border-gray-300 hover:bg-gray-300 transition">Friends</button>
<button class="px-2 py-1.5 bg-gray-200 text-gray-700 text-sm font-medium rounded-r hover:bg-gray-300 transition">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
<ul class="hidden group-hover:block absolute right-0 mt-1 w-40 bg-white rounded shadow-lg z-10 border border-gray-200">
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 1</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 2</a></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 3</a></li>
<li class="border-t border-gray-200"></li>
<li><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Action 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>