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>User Profile with Friends and Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 pt-5">
<div class="max-w-6xl mx-auto px-4">
<div class="flex flex-wrap -mx-2">
<!-- Left Sidebar - Profile Card -->
<div class="w-full lg:w-1/4 md:w-1/3 sm:w-1/3 px-2 mb-4">
<div class="bg-white shadow-sm rounded-lg p-6">
<!-- Name -->
<h2 class="text-xl font-semibold text-gray-800 mb-1">John Doe</h2>
<!-- Status -->
<div class="flex items-center gap-1.5 text-xs text-emerald-500 mb-4">
<span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
Online
</div>
<!-- Profile Image -->
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Profile" class="w-full rounded-lg border border-gray-100 mb-4">
<!-- Label -->
<div class="text-center mb-3">
<span class="bg-rose-500 text-white px-3 py-1 text-xs font-medium rounded-full">Admin</span>
</div>
<!-- Stars -->
<div class="flex justify-center items-center gap-0.5 mb-1">
<svg class="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-4 h-4 text-gray-300 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<div class="text-center text-xs text-gray-500 mb-4">Super User</div>
<!-- Member Since -->
<div class="text-center text-xs text-gray-400 mb-4">
Member since Jan 2012
</div>
<!-- Profile Details -->
<div class="border-t border-gray-100 pt-4 space-y-3">
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
<span class="text-gray-600">Orders:</span>
<span class="text-teal-500 font-medium">456</span>
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
<span class="text-gray-600">Posts:</span>
<span class="text-teal-500 font-medium">828</span>
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span class="text-gray-600">Tasks done:</span>
<span class="text-teal-500 font-medium">1024</span>
</div>
</div>
<!-- Send Message Button -->
<button class="w-full mt-6 bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2.5 rounded-lg font-medium transition-colors flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
Send message
</button>
</div>
</div>
<!-- Main Content -->
<div class="w-full lg:w-3/4 md:w-2/3 sm:w-2/3 px-2 mb-4">
<div class="bg-white shadow-sm rounded-lg p-6">
<!-- Header -->
<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
<h3 class="text-lg font-semibold text-gray-800">User Info</h3>
<button class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
Edit profile
</button>
</div>
<!-- User Info Grid -->
<div class="flex flex-wrap pb-6 border-b border-gray-100">
<div class="w-full sm:w-2/3 space-y-3">
<div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
<span class="text-sm font-medium text-gray-500 sm:w-28">First Name</span>
<span class="text-sm text-gray-800">John</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
<span class="text-sm font-medium text-gray-500 sm:w-28">Last Name</span>
<span class="text-sm text-gray-800">Doe</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-4">
<span class="text-sm font-medium text-gray-500 sm:w-28">Address</span>
<span class="text-sm text-gray-800">10880 Malibu Point,<br>Malibu, Calif., 90265</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
<span class="text-sm font-medium text-gray-500 sm:w-28">Email</span>
<span class="text-sm text-teal-500">[email protected]</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
<span class="text-sm font-medium text-gray-500 sm:w-28">Phone</span>
<span class="text-sm text-gray-800">011 223 344 556 677</span>
</div>
</div>
<!-- Social Links -->
<div class="w-full sm:w-1/3 mt-6 sm:mt-0 space-y-2">
<div class="flex items-center gap-3 text-sm text-gray-600 hover:text-teal-500 cursor-pointer transition-colors">
<svg class="w-5 h-5 text-sky-400" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
@johndoe
</div>
<div class="flex items-center gap-3 text-sm text-gray-600 hover:text-teal-500 cursor-pointer transition-colors">
<svg class="w-5 h-5 text-blue-700" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
John Doe
</div>
<div class="flex items-center gap-3 text-sm text-gray-600 hover:text-teal-500 cursor-pointer transition-colors">
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
John Doe
</div>
<div class="flex items-center gap-3 text-sm text-gray-600 hover:text-teal-500 cursor-pointer transition-colors">
<svg class="w-5 h-5 text-sky-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg>
john_doe
</div>
<div class="flex items-center gap-3 text-sm text-gray-600 hover:text-teal-500 cursor-pointer transition-colors">
<svg class="w-5 h-5 text-pink-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
@john_official
</div>
</div>
</div>
<!-- Tabs -->
<div class="mt-6">
<div class="border-b border-gray-200">
<nav class="flex gap-6">
<button id="tab-activity-btn" onclick="showTab('activity')" class="tab-btn px-1 py-3 border-b-2 border-teal-500 text-teal-500 font-medium text-sm transition-colors">
Activity
</button>
<button id="tab-friends-btn" onclick="showTab('friends')" class="tab-btn px-1 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
Friends
</button>
<button id="tab-chat-btn" onclick="showTab('chat')" class="tab-btn px-1 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
Chat
</button>
</nav>
</div>
<!-- Tab Content -->
<div class="py-4">
<!-- Activity Tab -->
<div id="tab-activity" class="tab-content">
<div class="overflow-x-auto">
<table class="w-full">
<tbody class="divide-y divide-gray-100">
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3 px-2 w-10">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
</div>
</td>
<td class="py-3 px-2 text-sm text-gray-600">
John Doe posted a comment in <span class="text-teal-500 cursor-pointer hover:underline">Avengers Initiative</span> project.
</td>
<td class="py-3 px-2 text-sm text-gray-400 whitespace-nowrap">2014/08/08 12:08</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3 px-2 w-10">
<div class="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
</div>
</td>
<td class="py-3 px-2 text-sm text-gray-600">
John Doe changed order status from
<span class="bg-teal-100 text-teal-600 px-2 py-0.5 text-xs font-medium rounded-full">Pending</span> to
<span class="bg-emerald-100 text-emerald-600 px-2 py-0.5 text-xs font-medium rounded-full">Completed</span>
</td>
<td class="py-3 px-2 text-sm text-gray-400 whitespace-nowrap">2014/08/08 12:08</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3 px-2 w-10">
<div class="w-8 h-8 bg-violet-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
</div>
</td>
<td class="py-3 px-2 text-sm text-gray-600">
John Doe posted a comment in <span class="text-teal-500 cursor-pointer hover:underline">Lost in Translation opening scene</span> discussion.
</td>
<td class="py-3 px-2 text-sm text-gray-400 whitespace-nowrap">2014/08/08 12:08</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3 px-2 w-10">
<div class="w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div>
</td>
<td class="py-3 px-2 text-sm text-gray-600">
John Doe posted a comment in <span class="text-teal-500 cursor-pointer hover:underline">Avengers Initiative</span> project.
</td>
<td class="py-3 px-2 text-sm text-gray-400 whitespace-nowrap">2014/08/08 12:08</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3 px-2 w-10">
<div class="w-8 h-8 bg-rose-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
</div>
</td>
<td class="py-3 px-2 text-sm text-gray-600">
John Doe changed order status from
<span class="bg-amber-100 text-amber-600 px-2 py-0.5 text-xs font-medium rounded-full">On Hold</span> to
<span class="bg-rose-100 text-rose-600 px-2 py-0.5 text-xs font-medium rounded-full">Disabled</span>
</td>
<td class="py-3 px-2 text-sm text-gray-400 whitespace-nowrap">2014/08/08 12:08</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="py-3 px-2 w-10">
<div class="w-8 h-8 bg-violet-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
</div>
</td>
<td class="py-3 px-2 text-sm text-gray-600">
John Doe posted a comment in <span class="text-teal-500 cursor-pointer hover:underline">Lost in Translation opening scene</span> discussion.
</td>
<td class="py-3 px-2 text-sm text-gray-400 whitespace-nowrap">2014/08/08 12:08</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Friends Tab -->
<div id="tab-friends" class="tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Friend 1 -->
<div class="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="w-12 h-12 rounded-full" alt="">
<div class="flex-1 min-w-0">
<div class="font-medium text-gray-800 hover:text-teal-500 cursor-pointer truncate">John Doe</div>
<div class="flex items-center gap-1.5 text-xs text-gray-400">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Last online: 5 minutes ago
</div>
</div>
<span class="bg-rose-100 text-rose-600 px-2 py-1 text-xs font-medium rounded-full">Admin</span>
</div>
<!-- Friend 2 -->
<div class="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="w-12 h-12 rounded-full" alt="">
<div class="flex-1 min-w-0">
<div class="font-medium text-gray-800 hover:text-teal-500 cursor-pointer truncate">Mila Kunis</div>
<div class="flex items-center gap-1.5 text-xs text-emerald-500">
<span class="w-2 h-2 bg-emerald-500 rounded-full"></span>
Online
</div>
</div>
<span class="bg-amber-100 text-amber-600 px-2 py-1 text-xs font-medium rounded-full">Pending</span>
</div>
<!-- Friend 3 -->
<div class="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="w-12 h-12 rounded-full" alt="">
<div class="flex-1 min-w-0">
<div class="font-medium text-gray-800 hover:text-teal-500 cursor-pointer truncate">Ryan Gosling</div>
<div class="flex items-center gap-1.5 text-xs text-emerald-500">
<span class="w-2 h-2 bg-emerald-500 rounded-full"></span>
Online
</div>
</div>
</div>
<!-- Friend 4 -->
<div class="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="w-12 h-12 rounded-full" alt="">
<div class="flex-1 min-w-0">
<div class="font-medium text-gray-800 hover:text-teal-500 cursor-pointer truncate">Robert Downey Jr.</div>
<div class="flex items-center gap-1.5 text-xs text-gray-400">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Last online: Thursday
</div>
</div>
</div>
<!-- Friend 5 -->
<div class="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="w-12 h-12 rounded-full" alt="">
<div class="flex-1 min-w-0">
<div class="font-medium text-gray-800 hover:text-teal-500 cursor-pointer truncate">Emma Watson</div>
<div class="flex items-center gap-1.5 text-xs text-gray-400">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Last online: 1 week ago
</div>
</div>
</div>
<!-- Friend 6 -->
<div class="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="w-12 h-12 rounded-full" alt="">
<div class="flex-1 min-w-0">
<div class="font-medium text-gray-800 hover:text-teal-500 cursor-pointer truncate">George Clooney</div>
<div class="flex items-center gap-1.5 text-xs text-gray-400">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Last online: 1 month ago
</div>
</div>
</div>
</div>
<div class="mt-6 text-right">
<button class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-lg font-medium transition-colors text-sm">
View all users
</button>
</div>
</div>
<!-- Chat Tab -->
<div id="tab-chat" class="tab-content hidden">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<!-- Chat Messages -->
<div class="h-96 overflow-y-auto p-4 space-y-4 bg-gray-50">
<!-- Message Left -->
<div class="flex gap-3 max-w-lg">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div>
<div class="bg-white p-3 rounded-2xl rounded-tl-none shadow-sm">
<div class="font-medium text-sm text-gray-800">Ryan Gosling</div>
<div class="text-sm text-gray-600 mt-1">I don't think they tried to market it to the billionaire, spelunking, base-jumping crowd.</div>
</div>
<div class="text-xs text-gray-400 mt-1 ml-2">Sep 21, 2013 · 18:28</div>
</div>
</div>
<!-- Message Right -->
<div class="flex gap-3 max-w-lg ml-auto flex-row-reverse">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div>
<div class="bg-teal-500 p-3 rounded-2xl rounded-tr-none text-white">
<div class="font-medium text-sm">Mila Kunis</div>
<div class="text-sm mt-1 opacity-90">That sounds like a great opportunity! I'd love to hear more about the project details when you have time.</div>
</div>
<div class="text-xs text-gray-400 mt-1 mr-2 text-right">Sep 21, 2013 · 12:45</div>
</div>
</div>
<!-- Message Right -->
<div class="flex gap-3 max-w-lg ml-auto flex-row-reverse">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div>
<div class="bg-teal-500 p-3 rounded-2xl rounded-tr-none text-white">
<div class="font-medium text-sm">Mila Kunis</div>
<div class="text-sm mt-1 opacity-90">Also, I wanted to mention that I've been working on some new designs that might be relevant.</div>
</div>
<div class="text-xs text-gray-400 mt-1 mr-2 text-right">Sep 21, 2013 · 12:46</div>
</div>
</div>
<!-- Message Left -->
<div class="flex gap-3 max-w-lg">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div>
<div class="bg-white p-3 rounded-2xl rounded-tl-none shadow-sm">
<div class="font-medium text-sm text-gray-800">Ryan Gosling</div>
<div class="text-sm text-gray-600 mt-1">That would be amazing! Let's schedule a call for next week to discuss everything in detail.</div>
</div>
<div class="text-xs text-gray-400 mt-1 ml-2">Sep 21, 2013 · 18:30</div>
</div>
</div>
<!-- Message Right -->
<div class="flex gap-3 max-w-lg ml-auto flex-row-reverse">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div>
<div class="bg-teal-500 p-3 rounded-2xl rounded-tr-none text-white">
<div class="font-medium text-sm">Mila Kunis</div>
<div class="text-sm mt-1 opacity-90">Perfect! Looking forward to it. Have a great weekend!</div>
</div>
<div class="text-xs text-gray-400 mt-1 mr-2 text-right">Sep 21, 2013 · 12:50</div>
</div>
</div>
</div>
<!-- New Message Form -->
<div class="border-t border-gray-200 p-4 bg-white">
<div class="flex gap-3">
<textarea class="flex-1 border border-gray-200 rounded-xl p-3 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent resize-none" rows="2" placeholder="Type your message..."></textarea>
<button class="bg-teal-500 hover:bg-teal-600 text-white px-4 rounded-xl font-medium transition-colors flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
<span class="hidden sm:inline">Send</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Switching Script -->
<script>
function showTab(tabName) {
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('border-teal-500', 'text-teal-500');
btn.classList.add('border-transparent', 'text-gray-500');
});
document.getElementById('tab-' + tabName).classList.remove('hidden');
const activeBtn = document.getElementById('tab-' + tabName + '-btn');
activeBtn.classList.remove('border-transparent', 'text-gray-500');
activeBtn.classList.add('border-teal-500', 'text-teal-500');
}
</script>
</body>
</html>