Bootdey

Instagram User Profile header

Ready-to-use Instagram User Profile header using Tailwind utility classes. No dependencies, no setup—just grab the code and ship.

Preview HTML

HTML code

This is the html code used to create this tailwind snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instagram User Profile Header - Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <!-- Header with Photo Collage -->
    <header class="m-0 pt-8 pb-0 bg-gradient-to-b from-gray-900 to-gray-800 shadow-[0_1px_0_rgba(255,255,255,0.2),0_1px_3px_rgba(0,0,0,0.5)_inset] relative overflow-hidden">
        <div class="mx-auto my-0 max-w-[1024px] min-w-[720px] border border-black border-t-0 rounded-t">
            <div class="pb-[40%] relative w-auto">
                <div class="absolute right-0 top-0 bottom-0 left-0 ml-0 mt-px bg-black rounded-t shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
                    <!-- Photo 1 - Top Left -->
                    <div class="absolute h-1/2 w-1/5 m-0 left-0 top-0 rounded-tl">
                        <a href="#" class="block h-full">
                            <div class="absolute bottom-px left-px right-0 top-0 rounded-tl transition-opacity duration-600">
                                <img src="https://www.bootdey.com/image/225x225/FFE4C4/ffffff" class="w-full h-full object-cover rounded-tl" alt="Photo 1" />
                                <b class="border border-white/15 absolute bottom-0 left-0 right-0 top-0 block rounded-tl"></b>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Photo 2 - Bottom Left -->
                    <div class="absolute h-1/2 w-1/5 m-0 left-0 top-1/2">
                        <a href="#" class="block h-full">
                            <div class="absolute bottom-0 left-px right-0 top-0 transition-opacity duration-600">
                                <img src="https://www.bootdey.com/image/225x225/FF69B4/ffffff" class="w-full h-full object-cover" alt="Photo 2" />
                                <b class="border border-white/15 absolute bottom-0 left-0 right-0 top-0 block"></b>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Photo 3 - Center Large -->
                    <div class="absolute h-full w-2/5 m-0 left-1/5 top-0">
                        <a href="#" class="block h-full">
                            <div class="absolute bottom-0 left-px right-0 top-0 transition-opacity duration-600">
                                <img src="https://www.bootdey.com/image/425x425/FF00FF/ffffff" class="w-full h-full object-cover" alt="Photo 3" />
                                <b class="border border-white/15 absolute bottom-0 left-0 right-0 top-0 block"></b>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Photo 4 - Top Right-Center -->
                    <div class="absolute h-1/2 w-1/5 m-0 left-[60%] top-0">
                        <a href="#" class="block h-full">
                            <div class="absolute bottom-px left-px right-0 top-0 transition-opacity duration-600">
                                <img src="https://www.bootdey.com/image/250x250/7B68EE/ffffff" class="w-full h-full object-cover" alt="Photo 4" />
                                <b class="border border-white/15 absolute bottom-0 left-0 right-0 top-0 block"></b>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Photo 5 - Bottom Right-Center -->
                    <div class="absolute h-1/2 w-1/5 m-0 left-[60%] top-1/2">
                        <a href="#" class="block h-full">
                            <div class="absolute bottom-0 left-px right-0 top-0 transition-opacity duration-600">
                                <img src="https://www.bootdey.com/image/220x220/66CDAA/ffffff" class="w-full h-full object-cover" alt="Photo 5" />
                                <b class="border border-white/15 absolute bottom-0 left-0 right-0 top-0 block"></b>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Photo 6 - Top Right -->
                    <div class="absolute h-1/2 w-1/5 m-0 left-[80%] top-0 rounded-tr">
                        <a href="#" class="block h-full">
                            <div class="absolute bottom-px left-px right-0 top-0 rounded-tr transition-opacity duration-600">
                                <img src="https://www.bootdey.com/image/230x230/00BFFF/ffffff" class="w-full h-full object-cover rounded-tr" alt="Photo 6" />
                                <b class="border border-white/15 absolute bottom-0 left-0 right-[-1px] top-0 block rounded-tr"></b>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Photo 7 - Bottom Right -->
                    <div class="absolute h-1/2 w-1/5 m-0 left-[80%] top-1/2">
                        <a href="#" class="block h-full">
                            <div class="absolute bottom-0 left-px right-0 top-0 transition-opacity duration-600">
                                <img src="https://www.bootdey.com/image/250x250/40E0D0/ffffff" class="w-full h-full object-cover" alt="Photo 7" />
                                <b class="border border-white/15 absolute bottom-0 left-0 right-[-1px] top-0 block"></b>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    
    <!-- Profile User Section -->
    <div class="relative max-w-[964px] min-h-[75px] mx-auto my-0 px-[30px] py-2.5 pb-[15px] border-b border-[#d9d9d9] bg-gradient-to-b from-[#eeeeee] to-white shadow-[1px_0_0_rgba(0,0,0,0.05),-1px_0_0_rgba(0,0,0,0.05),0_1px_2px_rgba(0,0,0,0.05)]">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full md:w-1/2 px-4">
                <div class="flex items-start">
                    <div class="mr-[15px]">
                        <img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="max-w-[150px] border-4 border-white shadow rounded" alt="Profile Avatar" />
                    </div>
                    <div class="flex-1">
                        <h2 class="text-2xl font-semibold text-gray-800 my-2">Full Name</h2>
                        <p class="text-gray-700"> 
                            <strong>Bootstrap Snippets</strong> 
                            <a href="#" class="text-blue-600 hover:text-blue-700 underline">https://bootdey.com</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 px-4">
                <ul class="flex list-none m-0 p-0">
                    <li class="p-1.5 text-center ml-6">
                        Photos 
                        <span class="font-bold block text-5xl mt-2.5">100</span>
                    </li>
                    <li class="p-1.5 text-center ml-6">
                        Followers 
                        <span class="font-bold block text-5xl mt-2.5">359</span>
                    </li>
                    <li class="p-1.5 text-center ml-6">
                        Following 
                        <span class="font-bold block text-5xl mt-2.5">100</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- Media Thumbnails Section -->
    <div class="max-w-[964px] mx-auto my-8 px-4">
        <ul class="flex flex-wrap list-none -m-1.5">
            <!-- Thumbnail 1 -->
            <li class="m-1.5">
                <a href="#" class="block group">
                    <div class="relative overflow-hidden bg-gray-200 rounded shadow hover:shadow-lg transition-shadow">
                        <img src="https://www.bootdey.com/image/220x220/FFB6C1/ffffff" class="w-[220px] h-[220px] object-cover" alt="Media 1" />
                    </div>
                    <div class="text-center text-gray-600 mt-2">
                        <div class="flex justify-center items-center gap-3">
                            <span class="flex items-center gap-1">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                                </svg>
                                12
                            </span>
                            <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="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>
                                3
                            </span>
                        </div>
                    </div>
                </a>
            </li>
            
            <!-- Thumbnail 2 -->
            <li class="m-1.5">
                <a href="#" class="block group">
                    <div class="relative overflow-hidden bg-gray-200 rounded shadow hover:shadow-lg transition-shadow">
                        <img src="https://www.bootdey.com/image/220x220/87CEEB/ffffff" class="w-[220px] h-[220px] object-cover" alt="Media 2" />
                    </div>
                    <div class="text-center text-gray-600 mt-2">
                        <div class="flex justify-center items-center gap-3">
                            <span class="flex items-center gap-1">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                                </svg>
                                24
                            </span>
                            <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="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>
                                8
                            </span>
                        </div>
                    </div>
                </a>
            </li>
            
            <!-- Thumbnail 3 -->
            <li class="m-1.5">
                <a href="#" class="block group">
                    <div class="relative overflow-hidden bg-gray-200 rounded shadow hover:shadow-lg transition-shadow">
                        <img src="https://www.bootdey.com/image/220x220/DDA0DD/ffffff" class="w-[220px] h-[220px] object-cover" alt="Media 3" />
                    </div>
                    <div class="text-center text-gray-600 mt-2">
                        <div class="flex justify-center items-center gap-3">
                            <span class="flex items-center gap-1">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                                </svg>
                                45
                            </span>
                            <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="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>
                                15
                            </span>
                        </div>
                    </div>
                </a>
            </li>
            
            <!-- Thumbnail 4 -->
            <li class="m-1.5">
                <a href="#" class="block group">
                    <div class="relative overflow-hidden bg-gray-200 rounded shadow hover:shadow-lg transition-shadow">
                        <img src="https://www.bootdey.com/image/220x220/98FB98/ffffff" class="w-[220px] h-[220px] object-cover" alt="Media 4" />
                    </div>
                    <div class="text-center text-gray-600 mt-2">
                        <div class="flex justify-center items-center gap-3">
                            <span class="flex items-center gap-1">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                                </svg>
                                18
                            </span>
                            <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="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>
                                6
                            </span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>