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>Profile with Timeline Posts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 pt-5">
<div class="max-w-6xl mx-auto px-4">
<div class="flex flex-wrap">
<div class="w-full">
<!-- Profile Section -->
<div class="relative overflow-hidden">
<!-- Profile Header Cover -->
<div class="absolute inset-0 bg-[url('https://bootdey.com/img/Content/bg1.jpg')] bg-cover bg-center">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/75"></div>
</div>
<!-- Profile Header Content -->
<div class="relative text-white p-6">
<!-- Profile Image -->
<div class="float-left w-28 h-28 overflow-hidden relative z-10 -mb-5 p-1 rounded bg-white">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Profile" class="max-w-full">
</div>
<!-- Profile Info -->
<div class="ml-36">
<h4 class="font-medium text-white mt-2 mb-1">Sean Ngu</h4>
<p class="mb-2 text-gray-200">UXUI + Frontend Developer</p>
<button class="px-3 py-1 text-sm bg-cyan-500 hover:bg-cyan-600 text-white rounded transition-colors">
Edit Profile
</button>
</div>
</div>
<!-- Profile Tabs -->
<ul class="relative bg-white -mt-2 pl-36 whitespace-nowrap flex">
<li class="inline-block">
<span class="block text-gray-800 font-bold text-xs px-5 py-3 cursor-pointer hover:text-gray-900">POSTS</span>
</li>
<li class="inline-block">
<span class="block text-gray-500 font-bold text-xs px-5 py-3 cursor-pointer hover:text-gray-900">ABOUT</span>
</li>
<li class="inline-block">
<span class="block text-gray-500 font-bold text-xs px-5 py-3 cursor-pointer hover:text-gray-900">PHOTOS</span>
</li>
<li class="inline-block">
<span class="block text-gray-500 font-bold text-xs px-5 py-3 cursor-pointer hover:text-gray-900">VIDEOS</span>
</li>
<li class="inline-block">
<span class="block text-gray-500 font-bold text-xs px-5 py-3 cursor-pointer hover:text-gray-900">FRIENDS</span>
</li>
</ul>
</div>
<!-- Profile Content / Timeline -->
<div class="p-6 rounded">
<!-- Timeline -->
<ul class="list-none m-0 p-0 relative before:content-[''] before:absolute before:top-1 before:bottom-1 before:w-1 before:bg-gray-800 before:left-[20%] before:-ml-0.5">
<!-- Timeline Item 1 -->
<li class="relative min-h-[50px] py-5">
<!-- Timeline Time -->
<div class="absolute left-0 w-[18%] text-right top-8">
<span class="block font-semibold text-xs leading-4">today</span>
<span class="block font-semibold text-xl leading-6 text-gray-800">04:20</span>
</div>
<!-- Timeline Icon -->
<div class="absolute left-[15%] w-[10%] text-center top-10">
<span class="inline-block w-5 h-5 rounded-full bg-gray-300 border-4 border-gray-800"></span>
</div>
<!-- Timeline Body -->
<div class="ml-[23%] mr-[17%] bg-white relative p-5 rounded-md before:content-[''] before:block before:absolute before:border-8 before:border-transparent before:border-r-white before:-left-4 before:top-5">
<!-- Header -->
<div class="pb-3 border-b border-gray-200 leading-8 flex items-center">
<span class="float-left w-8 h-8 rounded-full overflow-hidden -my-0.5 mr-2">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="max-w-full">
</span>
<span class="text-base font-semibold text-gray-800">Sean Ngu</span>
<span class="ml-auto text-gray-500 text-sm">18 Views</span>
</div>
<!-- Content -->
<div class="mt-4 text-sm leading-5 tracking-wide">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus turpis quis tincidunt luctus. Nam sagittis dui in nunc consequat, in imperdiet nunc sagittis.</p>
</div>
<!-- Likes Stats -->
<div class="mt-4 text-gray-500 font-semibold text-xs flex items-center">
<div class="flex items-center">
<span class="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center text-white text-xs mr-1">♥</span>
<span class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs -ml-1">?</span>
<span class="ml-2">4.3k</span>
</div>
<div class="ml-auto flex gap-4">
<span>259 Shares</span>
<span>21 Comments</span>
</div>
</div>
<!-- Footer Actions -->
<div class="mt-4 pt-4 border-t border-gray-200 flex gap-4">
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">? Like</span>
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">? Comment</span>
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">↗ Share</span>
</div>
<!-- Comment Box -->
<div class="mt-4 bg-gray-100 -mx-5 -mb-5 p-5 rounded-b-md">
<div class="flex items-center gap-3">
<div class="w-8 h-8 overflow-hidden rounded-full flex-shrink-0">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="max-w-full">
</div>
<div class="flex-1 flex gap-2">
<input type="text" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Write a comment...">
<button class="px-4 py-2 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-colors">Comment</button>
</div>
</div>
</div>
</div>
</li>
<!-- Timeline Item 2 -->
<li class="relative min-h-[50px] py-5">
<!-- Timeline Time -->
<div class="absolute left-0 w-[18%] text-right top-8">
<span class="block font-semibold text-xs leading-4">yesterday</span>
<span class="block font-semibold text-xl leading-6 text-gray-800">20:17</span>
</div>
<!-- Timeline Icon -->
<div class="absolute left-[15%] w-[10%] text-center top-10">
<span class="inline-block w-5 h-5 rounded-full bg-gray-300 border-4 border-gray-800"></span>
</div>
<!-- Timeline Body -->
<div class="ml-[23%] mr-[17%] bg-white relative p-5 rounded-md before:content-[''] before:block before:absolute before:border-8 before:border-transparent before:border-r-white before:-left-4 before:top-5">
<!-- Header -->
<div class="pb-3 border-b border-gray-200 leading-8 flex items-center">
<span class="float-left w-8 h-8 rounded-full overflow-hidden -my-0.5 mr-2">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="max-w-full">
</span>
<span class="text-base font-semibold text-gray-800">Sean Ngu</span>
<span class="ml-auto text-gray-500 text-sm">82 Views</span>
</div>
<!-- Content -->
<div class="mt-4 text-sm leading-5 tracking-wide">
<p>Location: United States</p>
</div>
<!-- Footer Actions -->
<div class="mt-4 pt-4 border-t border-gray-200 flex gap-4">
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">? Like</span>
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">? Comment</span>
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">↗ Share</span>
</div>
</div>
</li>
<!-- Timeline Item 3 - Quote -->
<li class="relative min-h-[50px] py-5">
<!-- Timeline Time -->
<div class="absolute left-0 w-[18%] text-right top-8">
<span class="block font-semibold text-xs leading-4">24 February 2014</span>
<span class="block font-semibold text-xl leading-6 text-gray-800">08:17</span>
</div>
<!-- Timeline Icon -->
<div class="absolute left-[15%] w-[10%] text-center top-10">
<span class="inline-block w-5 h-5 rounded-full bg-gray-300 border-4 border-gray-800"></span>
</div>
<!-- Timeline Body -->
<div class="ml-[23%] mr-[17%] bg-white relative p-5 rounded-md before:content-[''] before:block before:absolute before:border-8 before:border-transparent before:border-r-white before:-left-4 before:top-5">
<!-- Header -->
<div class="pb-3 border-b border-gray-200 leading-8 flex items-center">
<span class="float-left w-8 h-8 rounded-full overflow-hidden -my-0.5 mr-2">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="max-w-full">
</span>
<span class="text-base font-semibold text-gray-800">Sean Ngu</span>
<span class="ml-auto text-gray-500 text-sm">1,282 Views</span>
</div>
<!-- Content - Quote -->
<div class="mt-4 text-xl font-light leading-7">
<p>
<span class="float-left mr-2 text-gray-400">"</span>
Quisque sed varius nisl. Nulla facilisi. Phasellus consequat sapien sit amet nibh molestie placerat. Donec nulla quam, ullamcorper ut velit vitae, lobortis condimentum magna. Suspendisse mollis in sem vel mollis.
<span class="float-right ml-2 text-gray-400">"</span>
</p>
</div>
<!-- Footer Actions -->
<div class="mt-4 pt-4 border-t border-gray-200 flex gap-4">
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">? Like</span>
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">? Comment</span>
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">↗ Share</span>
</div>
</div>
</li>
<!-- Timeline Item 4 - Location Post -->
<li class="relative min-h-[50px] py-5">
<!-- Timeline Time -->
<div class="absolute left-0 w-[18%] text-right top-8">
<span class="block font-semibold text-xs leading-4">10 January 2014</span>
<span class="block font-semibold text-xl leading-6 text-gray-800">20:43</span>
</div>
<!-- Timeline Icon -->
<div class="absolute left-[15%] w-[10%] text-center top-10">
<span class="inline-block w-5 h-5 rounded-full bg-gray-300 border-4 border-gray-800"></span>
</div>
<!-- Timeline Body -->
<div class="ml-[23%] mr-[17%] bg-white relative p-5 rounded-md before:content-[''] before:block before:absolute before:border-8 before:border-transparent before:border-r-white before:-left-4 before:top-5">
<!-- Header -->
<div class="pb-3 border-b border-gray-200 leading-8 flex items-center">
<span class="float-left w-8 h-8 rounded-full overflow-hidden -my-0.5 mr-2">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="max-w-full">
</span>
<span class="text-base font-semibold text-gray-800">Sean Ngu</span>
<span class="ml-auto text-gray-500 text-sm">1,021,282 Views</span>
</div>
<!-- Content -->
<div class="mt-4 text-sm leading-5 tracking-wide">
<h4 class="text-base font-medium mb-2">
<span class="text-red-500 mr-1">?</span>
795 Folsom Ave, Suite 600 San Francisco, CA 94107
</h4>
<p>In hac habitasse platea dictumst. Pellentesque bibendum id sem nec faucibus. Maecenas molestie, augue vel accumsan rutrum, massa mi rutrum odio, id luctus mauris nibh ut leo.</p>
</div>
<!-- Footer Actions -->
<div class="mt-4 pt-4 border-t border-gray-200 flex gap-4">
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">? Like</span>
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">? Comment</span>
<span class="text-gray-600 hover:text-gray-800 cursor-pointer text-sm">↗ Share</span>
</div>
</div>
</li>
<!-- Timeline Item 5 - Loading -->
<li class="relative min-h-[50px] py-5">
<!-- Timeline Icon -->
<div class="absolute left-[15%] w-[10%] text-center top-10">
<span class="inline-block w-5 h-5 rounded-full bg-gray-300 border-4 border-gray-800"></span>
</div>
<!-- Timeline Body -->
<div class="ml-[23%] mr-[17%] bg-white relative p-5 rounded-md before:content-[''] before:block before:absolute before:border-8 before:border-transparent before:border-r-white before:-left-4 before:top-5">
<span class="text-gray-500">Loading...</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>