HTML code
This is the html code used to create this tailwind snippet
Download<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Social Network User Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 pt-5">
<div class="max-w-6xl mx-auto px-4">
<div class="text-sm">
<!-- Profile Header -->
<div class="mb-4">
<div class="shadow-sm border border-gray-100 rounded">
<!-- Cover Section -->
<div class="relative rounded-t">
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-b from-white/10 to-white z-10 rounded-t"></div>
<!-- Cover Image -->
<figure class="mb-0 md:h-auto h-28 overflow-hidden">
<img src="https://www.bootdey.com/image/1000x200/FF69B4/000000" class="w-full rounded-t md:scale-100 scale-150 md:mt-0 mt-4" alt="profile cover">
</figure>
<!-- Cover Body -->
<div class="absolute -bottom-5 left-0 z-20 w-full px-5 flex justify-between items-center">
<div class="flex items-center">
<img class="rounded-full w-24 md:w-28 border-4 border-white" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="profile">
<span class="text-xl font-semibold ml-4 text-gray-800">Amiah Burton</span>
</div>
<div class="hidden md:block">
<button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded flex items-center gap-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>
Edit profile
</button>
</div>
</div>
</div>
<!-- Header Links / Navigation -->
<div class="p-4 flex justify-center bg-white rounded-b">
<ul class="flex items-center mt-3 md:mt-0 list-none m-0 p-0">
<li class="flex items-center text-indigo-500">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
<path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"></path>
</svg>
<span class="hidden md:block cursor-pointer">Timeline</span>
</li>
<li class="ml-3 pl-3 border-l border-gray-200 flex items-center text-gray-800 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span class="hidden md:block cursor-pointer">About</span>
</li>
<li class="ml-3 pl-3 border-l border-gray-200 flex items-center text-gray-800 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<span class="hidden md:block cursor-pointer">Friends <span class="text-gray-400 text-xs">3,765</span></span>
</li>
<li class="ml-3 pl-3 border-l border-gray-200 flex items-center text-gray-800 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
<span class="hidden md:block cursor-pointer">Photos</span>
</li>
<li class="ml-3 pl-3 border-l border-gray-200 flex items-center text-gray-800 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
<polygon points="23 7 16 12 23 17 23 7"></polygon>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
</svg>
<span class="hidden md:block cursor-pointer">Videos</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Profile Body -->
<div class="flex flex-wrap -mx-2">
<!-- Left Sidebar -->
<div class="hidden md:block w-full md:w-1/3 xl:w-1/4 px-2 mb-4">
<div class="bg-white rounded shadow-sm border border-gray-100">
<div class="p-5">
<!-- About Header -->
<div class="flex items-center justify-between mb-2">
<h6 class="font-semibold text-gray-800 m-0">About</h6>
<button class="p-0 text-gray-400 hover:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
<p class="text-gray-600">Hi! I'm Amiah the Senior UI Designer at Vibrant. We hope you enjoy the design and quality of Social.</p>
<div class="mt-4">
<label class="text-xs font-bold text-gray-800 uppercase mb-0">Joined:</label>
<p class="text-gray-500">November 15, 2015</p>
</div>
<div class="mt-4">
<label class="text-xs font-bold text-gray-800 uppercase mb-0">Lives:</label>
<p class="text-gray-500">New York, USA</p>
</div>
<div class="mt-4">
<label class="text-xs font-bold text-gray-800 uppercase mb-0">Email:</label>
<p class="text-gray-500">[email protected]</p>
</div>
<div class="mt-4">
<label class="text-xs font-bold text-gray-800 uppercase mb-0">Website:</label>
<p class="text-gray-500">www.example.com</p>
</div>
<!-- Social Links -->
<div class="mt-4 flex gap-2">
<span class="w-8 h-8 flex items-center justify-center border border-gray-200 rounded hover:bg-gray-50 cursor-pointer transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</span>
<span class="w-8 h-8 flex items-center justify-center border border-gray-200 rounded hover:bg-gray-50 cursor-pointer transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
</span>
<span class="w-8 h-8 flex items-center justify-center border border-gray-200 rounded hover:bg-gray-50 cursor-pointer transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
</span>
</div>
</div>
</div>
</div>
<!-- Middle Content -->
<div class="w-full md:w-2/3 xl:w-1/2 px-2 mb-4">
<!-- Post Card 1 -->
<div class="bg-white rounded shadow-sm border border-gray-100 mb-4">
<!-- Post Header -->
<div class="px-5 py-4 border-b border-gray-100">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-9 h-9 rounded-full" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="">
<div class="ml-3">
<p class="font-medium text-gray-800">Mike Popescu</p>
<p class="text-xs text-gray-400">1 min ago</p>
</div>
</div>
<button class="p-0 text-gray-400 hover:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<!-- Post Body -->
<div class="p-5">
<p class="mb-3 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minima delectus nemo unde quae recusandae assumenda.</p>
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="">
</div>
<!-- Post Footer -->
<div class="px-5 py-4 border-t border-gray-100">
<div class="flex gap-6">
<span class="flex items-center text-gray-500 hover:text-gray-700 cursor-pointer transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<span class="hidden md:block ml-2">Like</span>
</span>
<span class="flex items-center text-gray-500 hover:text-gray-700 cursor-pointer transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<span class="hidden md:block ml-2">Comment</span>
</span>
<span class="flex items-center text-gray-500 hover:text-gray-700 cursor-pointer transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
<polyline points="16 6 12 2 8 6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
<span class="hidden md:block ml-2">Share</span>
</span>
</div>
</div>
</div>
<!-- Post Card 2 -->
<div class="bg-white rounded shadow-sm border border-gray-100 mb-4">
<!-- Post Header -->
<div class="px-5 py-4 border-b border-gray-100">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-9 h-9 rounded-full" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="">
<div class="ml-3">
<p class="font-medium text-gray-800">Mike Popescu</p>
<p class="text-xs text-gray-400">5 min ago</p>
</div>
</div>
<button class="p-0 text-gray-400 hover:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<!-- Post Body -->
<div class="p-5">
<p class="mb-3 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- Post Footer -->
<div class="px-5 py-4 border-t border-gray-100">
<div class="flex gap-6">
<span class="flex items-center text-gray-500 hover:text-gray-700 cursor-pointer transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<span class="hidden md:block ml-2">Like</span>
</span>
<span class="flex items-center text-gray-500 hover:text-gray-700 cursor-pointer transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<span class="hidden md:block ml-2">Comment</span>
</span>
<span class="flex items-center text-gray-500 hover:text-gray-700 cursor-pointer transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
<polyline points="16 6 12 2 8 6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
<span class="hidden md:block ml-2">Share</span>
</span>
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div class="hidden xl:block w-full xl:w-1/4 px-2">
<!-- Latest Photos -->
<div class="bg-white rounded shadow-sm border border-gray-100 mb-4">
<div class="p-5">
<h6 class="font-semibold text-gray-800 mb-3">Latest Photos</h6>
<div class="grid grid-cols-3 gap-1">
<figure class="m-0 overflow-hidden hover:scale-105 transition-transform cursor-pointer">
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
</figure>
<figure class="m-0 overflow-hidden hover:scale-105 transition-transform cursor-pointer">
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
</figure>
<figure class="m-0 overflow-hidden hover:scale-105 transition-transform cursor-pointer">
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
</figure>
<figure class="m-0 overflow-hidden hover:scale-105 transition-transform cursor-pointer">
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="">
</figure>
<figure class="m-0 overflow-hidden hover:scale-105 transition-transform cursor-pointer">
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="">
</figure>
<figure class="m-0 overflow-hidden hover:scale-105 transition-transform cursor-pointer">
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="">
</figure>
<figure class="m-0 overflow-hidden hover:scale-105 transition-transform cursor-pointer">
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="">
</figure>
<figure class="m-0 overflow-hidden hover:scale-105 transition-transform cursor-pointer">
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="">
</figure>
<figure class="m-0 overflow-hidden hover:scale-105 transition-transform cursor-pointer">
<img class="w-full rounded" src="https://bootdey.com/img/Content/avatar/avatar9.png" alt="">
</figure>
</div>
</div>
</div>
<!-- Suggestions -->
<div class="bg-white rounded shadow-sm border border-gray-100">
<div class="p-5">
<h6 class="font-semibold text-gray-800 mb-3">Suggestions For You</h6>
<!-- Suggestion Item 1 -->
<div class="flex justify-between items-center mb-3 pb-3 border-b border-gray-100">
<div class="flex items-center cursor-pointer">
<img class="w-9 h-9 rounded-full" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
<div class="ml-3">
<p class="font-medium text-gray-800">Mike Popescu</p>
<p class="text-xs text-gray-400">12 Mutual Friends</p>
</div>
</div>
<button class="p-2 text-gray-500 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</button>
</div>
<!-- Suggestion Item 2 -->
<div class="flex justify-between items-center mb-3 pb-3 border-b border-gray-100">
<div class="flex items-center cursor-pointer">
<img class="w-9 h-9 rounded-full" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
<div class="ml-3">
<p class="font-medium text-gray-800">Sarah Johnson</p>
<p class="text-xs text-gray-400">8 Mutual Friends</p>
</div>
</div>
<button class="p-2 text-gray-500 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</button>
</div>
<!-- Suggestion Item 3 -->
<div class="flex justify-between items-center mb-3 pb-3 border-b border-gray-100">
<div class="flex items-center cursor-pointer">
<img class="w-9 h-9 rounded-full" src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="">
<div class="ml-3">
<p class="font-medium text-gray-800">David Wilson</p>
<p class="text-xs text-gray-400">15 Mutual Friends</p>
</div>
</div>
<button class="p-2 text-gray-500 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</button>
</div>
<!-- Suggestion Item 4 -->
<div class="flex justify-between items-center mb-3 pb-3 border-b border-gray-100">
<div class="flex items-center cursor-pointer">
<img class="w-9 h-9 rounded-full" src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="">
<div class="ml-3">
<p class="font-medium text-gray-800">Emma Davis</p>
<p class="text-xs text-gray-400">6 Mutual Friends</p>
</div>
</div>
<button class="p-2 text-gray-500 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</button>
</div>
<!-- Suggestion Item 5 -->
<div class="flex justify-between items-center mb-3 pb-3 border-b border-gray-100">
<div class="flex items-center cursor-pointer">
<img class="w-9 h-9 rounded-full" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="">
<div class="ml-3">
<p class="font-medium text-gray-800">James Brown</p>
<p class="text-xs text-gray-400">20 Mutual Friends</p>
</div>
</div>
<button class="p-2 text-gray-500 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</button>
</div>
<!-- Suggestion Item 6 -->
<div class="flex justify-between items-center">
<div class="flex items-center cursor-pointer">
<img class="w-9 h-9 rounded-full" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="">
<div class="ml-3">
<p class="font-medium text-gray-800">Olivia Miller</p>
<p class="text-xs text-gray-400">9 Mutual Friends</p>
</div>
</div>
<button class="p-2 text-gray-500 hover:text-indigo-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>