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>Social Network Profile Head</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 pt-5">
<!-- Main Container -->
<div class="container mx-auto px-4">
<!-- Hero Background Image -->
<div class="h-[300px] rounded shadow-[inset_0_0_20px_rgba(0,0,0,0.3)] bg-cover bg-center bg-no-repeat bg-fixed mb-0" style="background-image: url('https://bootdey.com/img/Content/flores-amarillas-wallpaper.jpeg');"></div>
<!-- Profile Card Container -->
<div class="px-4 sm:px-8 -mt-[120px]">
<div class="flex justify-center">
<div class="w-full max-w-6xl">
<!-- Profile Card with Layered Shadow Effect -->
<div class="bg-white rounded shadow-md relative">
<!-- Top Layer Shadow -->
<div class="absolute top-[-40px] left-0 right-0 mx-auto w-4/5 h-5 bg-white/30 rounded-t"></div>
<!-- Middle Layer Shadow -->
<div class="absolute top-[-20px] left-0 right-0 mx-auto w-[90%] h-5 bg-white/60 rounded-t"></div>
<!-- Profile Content -->
<div class="p-4 sm:p-6 pb-0">
<div class="flex flex-col lg:flex-row items-center gap-8">
<!-- Left Section: Stats -->
<div class="w-full lg:w-1/3 flex justify-center lg:justify-start">
<ul class="flex gap-4 sm:gap-8 list-none p-0 m-0">
<li class="text-center">
<div class="text-2xl font-semibold text-gray-800">246</div>
<div class="text-base text-gray-400">Friends</div>
</li>
<li class="text-center">
<div class="text-2xl font-semibold text-gray-800">30</div>
<div class="text-base text-gray-400">Online</div>
</li>
<li class="text-center">
<div class="text-2xl font-semibold text-gray-800">216</div>
<div class="text-base text-gray-400">Offline</div>
</li>
</ul>
</div>
<!-- Center Section: Profile Image & Info -->
<div class="w-full lg:w-1/3 flex flex-col items-center relative">
<!-- Profile Image -->
<img class="rounded-full w-[120px] h-[120px] shadow-[0_0_0_6px_white] absolute -top-[144px] z-10" src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="David Green">
<!-- Profile Info -->
<div class="text-center mt-16 mb-4 leading-7">
<h2 class="text-gray-800 text-2xl font-semibold mb-1">David Green</h2>
<div class="text-gray-400 text-base">Las Vegas, Nevada, U.S.</div>
</div>
</div>
<!-- Right Section: Actions -->
<div class="w-full lg:w-1/3 flex justify-center lg:justify-end items-center gap-2">
<div class="flex items-center gap-2">
<a href="#" class="bg-white text-gray-600 shadow-md px-8 py-2.5 rounded hover:shadow-lg transition font-medium 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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
</svg>
Add Friend
</a>
<!-- Dropdown Menu -->
<div class="relative inline-block">
<button type="button" id="dropdownButton" class="text-gray-800 bg-transparent border-none p-0 text-3xl leading-none cursor-pointer hover:text-gray-600 transition">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</button>
<div id="dropdownMenu" class="hidden absolute right-0 mt-2 min-w-[120px] bg-white rounded shadow-[1px_1px_30px_rgba(0,0,0,0.15)] text-left py-5 px-7 z-50">
<a href="#" class="block text-gray-800 font-medium py-2 hover:text-gray-600 no-underline">Report</a>
<a href="#" class="block text-gray-800 font-medium py-2 hover:text-gray-600 no-underline">Block</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Dropdown Toggle Functionality
const dropdownButton = document.getElementById('dropdownButton');
const dropdownMenu = document.getElementById('dropdownMenu');
dropdownButton.addEventListener('click', function(e) {
e.stopPropagation();
dropdownMenu.classList.toggle('hidden');
});
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
if (!dropdownButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
dropdownMenu.classList.add('hidden');
}
});
</script>
</body>
</html>