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 User Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif'],
},
colors: {
cover: '#f9a8b8',
}
}
}
}
</script>
</head>
<body class="bg-gray-100 font-sans min-h-screen">
<!-- Navbar -->
<nav class="bg-gray-900 mx-auto max-w-6xl mt-0 rounded-b-lg">
<div class="px-4 py-3">
<div class="flex items-center justify-between">
<!-- Brand -->
<a href="#" class="text-white text-lg font-semibold">Application</a>
<!-- Mobile Toggle -->
<button id="mobileMenuBtn" class="md:hidden text-gray-400 hover:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<!-- Desktop Menu -->
<div class="hidden md:block relative">
<button id="userDropdownBtn" class="flex items-center gap-2 text-gray-300 hover:text-white transition-colors">
<span>Username</span>
<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="M19 9l-7 7-7-7"/>
</svg>
</button>
<!-- Dropdown Menu -->
<div id="userDropdown" class="hidden absolute right-0 mt-2 w-56 bg-gray-100 rounded-lg shadow-xl border border-gray-200 z-50">
<div class="p-4 text-center">
<img class="w-20 h-20 mx-auto rounded-full border-4 border-white shadow-md" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="User avatar">
<a href="#" class="inline-block mt-2 text-sm text-white bg-gray-800 hover:bg-gray-900 px-3 py-1 rounded transition-colors">Change Picture</a>
<div class="flex justify-center gap-2 mt-3">
<a href="#" class="inline-flex items-center gap-1 text-sm bg-white hover:bg-gray-50 border border-gray-300 px-3 py-1.5 rounded transition-colors">
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
Security
</a>
<a href="#" class="inline-flex items-center gap-1 text-sm bg-white hover:bg-gray-50 border border-gray-300 px-3 py-1.5 rounded transition-colors">
<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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
</svg>
Logout
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden md:hidden mt-4 pb-2">
<div class="bg-gray-100 rounded-lg p-4 text-center">
<img class="w-16 h-16 mx-auto rounded-full border-4 border-white shadow-md" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="User avatar">
<p class="mt-2 font-medium text-gray-800">Username</p>
<a href="#" class="inline-block mt-2 text-sm text-white bg-gray-800 hover:bg-gray-900 px-3 py-1 rounded transition-colors">Change Picture</a>
<div class="flex justify-center gap-2 mt-3">
<a href="#" class="inline-flex items-center gap-1 text-sm bg-white hover:bg-gray-50 border border-gray-300 px-3 py-1.5 rounded transition-colors">
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
Security
</a>
<a href="#" class="inline-flex items-center gap-1 text-sm bg-white hover:bg-gray-50 border border-gray-300 px-3 py-1.5 rounded transition-colors">
<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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
</svg>
Logout
</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="max-w-6xl mx-auto px-4 mt-6">
<div class="bg-gray-200 rounded-lg p-4 shadow-sm">
<div class="flex flex-col md:flex-row gap-4">
<!-- Sidebar -->
<div class="md:w-1/6">
<div class="bg-gray-100 rounded-lg shadow-sm overflow-hidden border border-gray-300">
<a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 bg-blue-600 text-white font-medium">
<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="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>
Compose
</a>
<a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 border-t border-gray-200 transition-colors">
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
Home
</a>
<a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 border-t border-gray-200 transition-colors">
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
Profile
</a>
<a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 border-t border-gray-200 transition-colors">
<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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
</svg>
Security
</a>
<a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 border-t border-gray-200 transition-colors">
<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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
</svg>
Logout
</a>
</div>
</div>
<!-- Main Panel -->
<div class="md:w-5/6">
<!-- Cover Section -->
<div class="relative bg-cover rounded-lg h-28 overflow-visible" style="background-color: #FFB6C1;">
<img class="absolute -bottom-10 left-8 w-28 h-28 rounded-full border-4 border-white shadow-lg" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Profile avatar">
<div class="absolute bottom-4 left-44 text-2xl font-semibold text-gray-800">User full name</div>
<button class="absolute top-3 right-3 inline-flex items-center gap-1 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium px-3 py-1.5 rounded transition-colors">
<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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
Change cover
</button>
</div>
<!-- Tabs Navigation -->
<div class="mt-14">
<div class="flex border-b border-gray-300">
<button data-tab="inbox" class="tab-btn flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 border-blue-600 text-blue-600 bg-white rounded-t-lg -mb-px">
<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>
Inbox
</button>
<button data-tab="sent" class="tab-btn flex items-center gap-2 px-4 py-3 text-sm font-medium text-gray-600 hover:text-gray-800 border-b-2 border-transparent hover:border-gray-300 transition-colors">
<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 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
</svg>
Sent
</button>
<button data-tab="assignment" class="tab-btn flex items-center gap-2 px-4 py-3 text-sm font-medium text-gray-600 hover:text-gray-800 border-b-2 border-transparent hover:border-gray-300 transition-colors">
<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
Assignment
</button>
<button data-tab="event" class="tab-btn flex items-center gap-2 px-4 py-3 text-sm font-medium text-gray-600 hover:text-gray-800 border-b-2 border-transparent hover:border-gray-300 transition-colors">
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
Event
</button>
</div>
<!-- Tab Content -->
<div class="bg-white rounded-b-lg">
<!-- Inbox Tab -->
<div id="inbox" class="tab-content p-4">
<div class="message-item">
<button class="message-toggle w-full" data-target="message1">
<div class="flex items-center gap-4 bg-gray-100 hover:bg-gray-50 border border-gray-200 rounded-lg p-3 transition-colors">
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" onclick="event.stopPropagation()">
<div class="w-32 text-left font-medium text-gray-800">Admin Kumar</div>
<div class="flex-1 text-left">
<span class="font-semibold text-gray-900">Hi Check this new Bootstrap plugin</span>
</div>
<div class="flex items-center gap-3 text-gray-500 text-sm">
<span class="flex items-center gap-1">
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
12:10 PM
</span>
<button class="reply-btn inline-flex items-center gap-1 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium px-3 py-1.5 rounded transition-colors" onclick="event.stopPropagation(); openModal()">
<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="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
</svg>
Reply
</button>
</div>
</div>
</button>
<div id="message1" class="message-body hidden mt-2 bg-gray-50 border border-gray-200 rounded-lg p-4 text-gray-700">
This is the message body1
</div>
</div>
<div class="mt-4">
<button class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium px-3 py-2 rounded transition-colors">
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
</svg>
Delete Checked Items
</button>
</div>
</div>
<!-- Sent Tab -->
<div id="sent" class="tab-content hidden p-4">
<div class="message-item">
<button class="message-toggle w-full" data-target="sentMessage1">
<div class="flex items-center gap-4 bg-gray-100 hover:bg-gray-50 border border-gray-200 rounded-lg p-3 transition-colors">
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" onclick="event.stopPropagation()">
<div class="w-32 text-left font-medium text-gray-800">Kumar</div>
<div class="flex-1 text-left">
<span class="font-semibold text-gray-900">This is reply from Bootstrap plugin</span>
</div>
<div class="flex items-center gap-1 text-gray-500 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
12:30 AM
</div>
</div>
</button>
<div id="sentMessage1" class="message-body hidden mt-2 bg-gray-50 border border-gray-200 rounded-lg p-4 text-gray-700">
This is the message body1
</div>
</div>
<div class="mt-4">
<button class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium px-3 py-2 rounded transition-colors">
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
</svg>
Delete Checked Items
</button>
</div>
</div>
<!-- Assignment Tab -->
<div id="assignment" class="tab-content hidden p-4">
<a href="#" class="block">
<div class="flex items-center justify-between bg-gray-100 hover:bg-gray-50 border border-gray-200 rounded-lg p-3 transition-colors">
<span class="font-medium text-gray-800">Open GL Assignments</span>
<span class="flex items-center gap-1 text-gray-500 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
12:20 AM 20 Dec 2014
</span>
</div>
</a>
</div>
<!-- Event Tab -->
<div id="event" class="tab-content hidden p-4">
<div class="flex gap-4">
<a href="#" class="shrink-0">
<img class="w-24 h-24 object-cover rounded-lg border border-gray-200 shadow-sm" src="https://www.bootdey.com/image/200x200" alt="Event thumbnail">
</a>
<div>
<h4 class="text-lg font-semibold text-gray-900">Animation Workshop</h4>
<p class="mt-1 text-gray-600">2Days animation workshop to be conducted</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Reply Modal -->
<div id="replyModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-auto">
<div class="flex items-center justify-between p-4 border-b border-gray-200">
<h3 class="text-lg font-semibold text-gray-900">Reply to Message</h3>
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="p-6">
<div class="space-y-4">
<div class="flex flex-col md:flex-row md:items-center gap-2">
<label class="md:w-24 text-sm font-medium text-gray-700">Body:</label>
<input type="text" placeholder="Message Body" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
</div>
<div class="flex flex-col md:flex-row md:items-start gap-2">
<label class="md:w-24 text-sm font-medium text-gray-700 md:pt-2">Message:</label>
<textarea rows="4" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all resize-none"></textarea>
</div>
<div class="flex flex-col md:flex-row md:items-center gap-2">
<div class="md:w-24"></div>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-2 rounded-lg transition-colors">
Send
</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Mobile menu toggle
document.getElementById('mobileMenuBtn').addEventListener('click', function() {
document.getElementById('mobileMenu').classList.toggle('hidden');
});
// User dropdown toggle
document.getElementById('userDropdownBtn').addEventListener('click', function(e) {
e.stopPropagation();
document.getElementById('userDropdown').classList.toggle('hidden');
});
// Close dropdown when clicking outside
document.addEventListener('click', function() {
document.getElementById('userDropdown').classList.add('hidden');
});
// Tab switching
document.querySelectorAll('.tab-btn').forEach(function(btn) {
btn.addEventListener('click', function() {
var tabId = this.getAttribute('data-tab');
// Remove active state from all tabs
document.querySelectorAll('.tab-btn').forEach(function(tab) {
tab.classList.remove('border-blue-600', 'text-blue-600', 'bg-white', '-mb-px');
tab.classList.add('border-transparent', 'text-gray-600');
});
// Add active state to clicked tab
this.classList.add('border-blue-600', 'text-blue-600', 'bg-white', '-mb-px');
this.classList.remove('border-transparent', 'text-gray-600');
// Hide all tab content
document.querySelectorAll('.tab-content').forEach(function(content) {
content.classList.add('hidden');
});
// Show selected tab content
document.getElementById(tabId).classList.remove('hidden');
});
});
// Message toggle (collapse/expand)
document.querySelectorAll('.message-toggle').forEach(function(toggle) {
toggle.addEventListener('click', function() {
var targetId = this.getAttribute('data-target');
document.getElementById(targetId).classList.toggle('hidden');
});
});
// Modal functions
function openModal() {
document.getElementById('replyModal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeModal() {
document.getElementById('replyModal').classList.add('hidden');
document.body.style.overflow = '';
}
// Close modal on backdrop click
document.getElementById('replyModal').addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
// Close modal on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeModal();
}
});
// Sidebar link active state
document.querySelectorAll('.sidebar-link').forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
// Remove active state from all links
document.querySelectorAll('.sidebar-link').forEach(function(l) {
l.classList.remove('bg-blue-600', 'text-white');
l.classList.add('text-gray-700', 'hover:bg-gray-50');
});
// Add active state to clicked link
this.classList.add('bg-blue-600', 'text-white');
this.classList.remove('text-gray-700', 'hover:bg-gray-50');
});
});
</script>
</body>
</html>