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>Profile Videos</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200">
<div class="container mx-auto px-4 pt-5">
<!-- Profile Header -->
<div class="relative overflow-hidden">
<!-- Cover Background -->
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://bootdey.com/img/Content/bg1.jpg');"></div>
<div class="absolute inset-0 bg-gradient-to-b from-black/25 to-black/85"></div>
<!-- Profile Content -->
<div class="relative text-white p-5">
<div class="flex items-start gap-5">
<div class="w-32 h-32 bg-white p-1 rounded flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Profile" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="text-2xl font-medium mb-1 mt-2">John Doe</h4>
<p class="mb-3">UXUI + Frontend Developer</p>
<a href="#" class="inline-block px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white text-xs font-semibold rounded transition mb-4">Edit Profile</a>
</div>
</div>
</div>
<!-- Navigation Tabs -->
<div class="relative bg-white border-b border-gray-300">
<ul class="flex whitespace-nowrap overflow-x-auto pl-0 sm:pl-36 list-none m-0">
<li class="inline-block">
<a href="#" class="block px-5 py-2.5 text-xs font-bold text-black no-underline hover:text-blue-500 transition">POSTS</a>
</li>
<li class="inline-block">
<a href="#" class="block px-5 py-2.5 text-xs font-bold text-black no-underline hover:text-blue-500 transition">ABOUT</a>
</li>
<li class="inline-block">
<a href="#" class="block px-5 py-2.5 text-xs font-bold text-black no-underline hover:text-blue-500 transition">PHOTOS</a>
</li>
<li class="inline-block">
<a href="#" class="block px-5 py-2.5 text-xs font-bold text-blue-500 no-underline hover:text-blue-500 transition">VIDEOS</a>
</li>
<li class="inline-block">
<a href="#" class="block px-5 py-2.5 text-xs font-bold text-black no-underline hover:text-blue-500 transition">FRIENDS</a>
</li>
</ul>
</div>
</div>
<!-- Main Content -->
<div class="py-6">
<div class="flex flex-wrap -mx-4">
<!-- Videos Section -->
<div class="w-full md:w-2/3 px-4 mb-5">
<div class="mb-4">
<strong>Videos (15)</strong>
</div>
<!-- First Row: Large + 2 Small -->
<div class="flex flex-wrap -mx-0.5 mb-0.5">
<div class="w-full sm:w-2/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/3Kf-FlECN7M?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="w-full sm:w-1/3 px-0.5">
<div class="mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/izsjRpcgfmk?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/j876xgnTVUg?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- Second Row: 3 Equal Videos -->
<div class="flex flex-wrap -mx-0.5 mb-0.5">
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/wUqH_5memWY?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/wXmu-EYAmKU?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/xS1DghfzuMc?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Third Row: 3 Equal Videos -->
<div class="flex flex-wrap -mx-0.5 mb-0.5">
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/v3ZkCLUFrys?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/toPm-L7Ib44?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/qD8OnPC1fLI?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Fourth Row: 3 Equal Videos -->
<div class="flex flex-wrap -mx-0.5 mb-0.5">
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/Guo7gR0XyaU?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/ADfIlLfs5Bk?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/8Wg1MYjOguI?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Fifth Row: 3 Equal Videos -->
<div class="flex flex-wrap -mx-0.5">
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/LbpHB9wbDhY?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/oVWBFkaXMyw?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="w-full sm:w-1/3 px-0.5 mb-0.5">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/90PRvlhOLSk?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="w-full md:w-1/3 px-4 hidden md:block">
<ul class="p-0 m-0 list-none">
<li class="text-xs font-bold text-gray-500 uppercase pb-1.5">Personal Information</li>
<li class="py-2.5 border-t border-gray-300">
<div class="font-bold">Occupation:</div>
<div class="text-gray-600">UXUI / Frontend Developer</div>
</li>
<li class="py-2.5 border-t border-gray-300">
<div class="font-bold">Skills:</div>
<div class="text-gray-600">C++, PHP, HTML5, CSS, jQuery, MYSQL, Ionic, Laravel, Phonegap, Bootstrap, Angular JS, Angular JS, Asp.net</div>
</li>
<li class="py-2.5 border-t border-gray-300">
<div class="font-bold">Birth of Date:</div>
<div class="text-gray-600">1989/11/04</div>
</li>
<li class="py-2.5 border-t border-gray-300">
<div class="font-bold">Country:</div>
<div class="text-gray-600">San Francisco</div>
</li>
<li class="py-2.5 border-t border-gray-300">
<div class="font-bold">Address:</div>
<div class="text-gray-600">
<address class="mb-0 not-italic">
Twitter, Inc.<br />
1355 Market Street, Suite 900<br />
San Francisco, CA 94103
</address>
</div>
</li>
<li class="py-2.5 border-t border-gray-300">
<div class="font-bold">Phone No.:</div>
<div class="text-gray-600">(123) 456-7890</div>
</li>
<li class="text-xs font-bold text-gray-500 uppercase pb-1.5 pt-6">Friend List (9)</li>
<li class="py-2.5">
<a href="#" class="inline-block mb-1.5"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Friend" class="w-9 h-9 rounded-full"></a>
<a href="#" class="inline-block mb-1.5"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Friend" class="w-9 h-9 rounded-full"></a>
<a href="#" class="inline-block mb-1.5"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Friend" class="w-9 h-9 rounded-full"></a>
<a href="#" class="inline-block mb-1.5"><img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="Friend" class="w-9 h-9 rounded-full"></a>
<a href="#" class="inline-block mb-1.5"><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Friend" class="w-9 h-9 rounded-full"></a>
<a href="#" class="inline-block mb-1.5"><img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Friend" class="w-9 h-9 rounded-full"></a>
<a href="#" class="inline-block mb-1.5"><img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="Friend" class="w-9 h-9 rounded-full"></a>
<a href="#" class="inline-block mb-1.5"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Friend" class="w-9 h-9 rounded-full"></a>
<a href="#" class="inline-block mb-1.5"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Friend" class="w-9 h-9 rounded-full"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>