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 Page with Activities - Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-5">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Left Sidebar - Profile Details -->
<div class="w-full lg:w-1/3">
<div class="bg-white rounded shadow">
<!-- Panel Heading -->
<div class="px-4 py-4 bg-gray-50 rounded-t border-b border-gray-200">
<strong class="text-gray-800">Details</strong>
</div>
<!-- Panel Body -->
<div class="p-0">
<!-- Profile Image -->
<div class="border-l-0 border-r-0">
<img
alt="Profile"
class="w-full block max-w-full h-auto"
src="https://bootdey.com/img/Content/avatar/avatar1.png"
>
</div>
<!-- Profile Content -->
<div class="px-5 pb-5">
<h3 class="mt-4 mb-2 text-xl font-bold text-gray-800">Jane Doe</h3>
<p class="text-gray-600 mb-3">
<svg class="inline w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Laoag City, Philippines 2900
</p>
<h5 class="text-base font-bold text-gray-800 mb-2">About me</h5>
<p class="text-gray-600 text-sm mb-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitat.
</p>
<!-- Stats -->
<div class="w-full my-8 text-center flex">
<div class="flex-1 align-top">
<div class="h-4 mb-2"></div>
<h5 class="text-gray-800 text-base">
<strong class="text-lg">169</strong><br>
<span class="text-sm font-normal">Posts</span>
</h5>
</div>
<div class="flex-1 align-top">
<div class="h-4 mb-2"></div>
<h5 class="text-gray-800 text-base">
<strong class="text-lg">28</strong><br>
<span class="text-sm font-normal">Following</span>
</h5>
</div>
<div class="flex-1 align-top">
<div class="h-4 mb-2"></div>
<h5 class="text-gray-800 text-base">
<strong class="text-lg">240</strong><br>
<span class="text-sm font-normal">Followers</span>
</h5>
</div>
</div>
<!-- Action Buttons -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4">
<button
type="button"
class="w-full px-3 py-2 text-sm text-white bg-gray-400 hover:bg-gray-500 rounded transition-colors flex items-center justify-center gap-2"
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
</svg>
Send Message
</button>
<button
type="button"
class="w-full px-3 py-2 text-sm text-gray-800 bg-white border border-gray-300 hover:bg-gray-50 rounded transition-colors flex items-center justify-center gap-2"
>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
</svg>
Buy a coffee
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column - Activities -->
<div class="w-full lg:w-2/3">
<div class="bg-white rounded shadow">
<!-- Panel Heading -->
<div class="px-4 py-4 bg-gray-50 rounded-t border-b border-gray-200">
<strong class="text-gray-800">Activities</strong>
</div>
<!-- Panel Body -->
<div class="p-5">
<div>
<!-- Feed Activity List -->
<div>
<!-- Feed Element 1 -->
<div class="py-4 border-b border-gray-200">
<a href="#" class="float-left mr-3">
<img
alt="Profile"
class="w-10 h-10 rounded-full"
src="https://bootdey.com/img/Content/avatar/avatar1.png"
>
</a>
<div>
<small class="float-right text-teal-600">5m ago</small>
<strong>Vaughn Oremortsac</strong> started following <strong>Oscar Adrian Acosta</strong>.<br>
<small class="text-gray-500">Today 6:19 am - 12.04.2015</small>
<div class="mt-3 flex gap-2">
<a
href="#"
class="inline-flex items-center gap-1 px-3 py-1 text-xs bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded transition-colors"
>
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"/>
</svg>
Like
</a>
<a
href="#"
class="inline-flex items-center gap-1 px-3 py-1 text-xs bg-red-500 hover:bg-red-600 text-white rounded transition-colors"
>
<svg class="w-3 h-3" 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>
Love
</a>
</div>
</div>
<div class="clear-both"></div>
</div>
<!-- Feed Element 2 -->
<div class="py-4 border-b border-gray-200">
<a href="#" class="float-left mr-3">
<img
alt="Profile"
class="w-10 h-10 rounded-full"
src="https://bootdey.com/img/Content/avatar/avatar2.png"
>
</a>
<div>
<small class="float-right text-gray-600">30m ago</small>
<strong>Spider Rodas</strong> purchased Ebook pro.<br>
<small class="text-gray-500">Today 8:52 pm - 1.06.2015</small>
</div>
<div class="clear-both"></div>
</div>
<!-- Feed Element 3 -->
<div class="py-4 border-b border-gray-200">
<a href="#" class="float-left mr-3">
<img
alt="Profile"
class="w-10 h-10 rounded-full"
src="https://bootdey.com/img/Content/avatar/avatar3.png"
>
</a>
<div>
<small class="float-right text-gray-600">2h ago</small>
<strong>Pollet Piedad</strong> posted message on <strong>Aifa Agpasa</strong> site.<br>
<small class="text-gray-500">Today 2:10 pm - 12.06.2016</small>
<div class="border border-gray-200 rounded mt-3 mb-2 p-4 text-xs leading-relaxed bg-gray-50">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div class="float-right flex gap-2">
<a
href="#"
class="inline-flex items-center gap-1 px-3 py-1 text-xs bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded transition-colors"
>
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"/>
</svg>
Like
</a>
<a
href="#"
class="inline-flex items-center gap-1 px-3 py-1 text-xs bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded transition-colors"
>
<svg class="w-3 h-3" 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>
Love
</a>
<a
href="#"
class="inline-flex items-center gap-1 px-3 py-1 text-xs bg-gray-400 hover:bg-gray-500 text-white rounded transition-colors"
>
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
</svg>
Message
</a>
</div>
</div>
<div class="clear-both"></div>
</div>
<!-- Feed Element 4 with Photos -->
<div class="py-4 border-b border-gray-200">
<a href="#" class="float-left mr-3">
<img
alt="Profile"
class="w-10 h-10 rounded-full"
src="https://bootdey.com/img/Content/avatar/avatar4.png"
>
</a>
<div>
<small class="float-right text-gray-600">2h ago</small>
<strong>Myan Francisco</strong> add 1 photo on <strong>Hector Sanqui</strong>.<br>
<small class="text-gray-500">4 days ago at 5:29pm</small>
<div class="mt-3 flex gap-3">
<a href="#" class="block">
<img
alt="Photo"
class="h-44 rounded overflow-hidden object-cover"
src="https://www.bootdey.com/image/200x220/"
>
</a>
<a href="#" class="block">
<img
alt="Photo"
class="h-44 rounded overflow-hidden object-cover"
src="https://www.bootdey.com/image/200x220/"
>
</a>
</div>
</div>
<div class="clear-both"></div>
</div>
<!-- Feed Element 5 -->
<div class="py-4 border-b border-gray-200">
<a href="#" class="float-left mr-3">
<img
alt="Profile"
class="w-10 h-10 rounded-full"
src="https://bootdey.com/img/Content/avatar/avatar5.png"
>
</a>
<div>
<small class="float-right text-teal-600">5h ago</small>
<strong>Nahtanoj Odapsar</strong> started following <strong>Myan Francisco</strong>.<br>
<small class="text-gray-500">Yesterday 1:21 pm - 11.06.2016</small>
<div class="mt-3 flex gap-2">
<a
href="#"
class="inline-flex items-center gap-1 px-3 py-1 text-xs bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded transition-colors"
>
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"/>
</svg>
Like
</a>
<a
href="#"
class="inline-flex items-center gap-1 px-3 py-1 text-xs bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded transition-colors"
>
<svg class="w-3 h-3" 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>
Love
</a>
</div>
</div>
<div class="clear-both"></div>
</div>
<!-- Feed Element 6 -->
<div class="py-4 border-b border-gray-200">
<a href="#" class="float-left mr-3">
<img
alt="Profile"
class="w-10 h-10 rounded-full"
src="https://bootdey.com/img/Content/avatar/avatar6.png"
>
</a>
<div>
<small class="float-right text-gray-600">2h ago</small>
<strong>Roselyn Rasay Distor</strong> posted message on <strong>Aifa Agpasa</strong> site.<br>
<small class="text-gray-500">Yesterday 5:20 pm - 12.06.2016</small>
<div class="border border-gray-200 rounded mt-3 mb-2 p-4 text-xs leading-relaxed bg-gray-50">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div class="float-right">
<a
href="#"
class="inline-flex items-center gap-1 px-3 py-1 text-xs bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded transition-colors"
>
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"/>
</svg>
Like
</a>
</div>
</div>
<div class="clear-both"></div>
</div>
<!-- Feed Element 7 -->
<div class="py-4 border-b border-gray-200">
<a href="#" class="float-left mr-3">
<img
alt="Profile"
class="w-10 h-10 rounded-full"
src="https://bootdey.com/img/Content/avatar/avatar1.png"
>
</a>
<div>
<small class="float-right text-gray-600">23h ago</small>
<strong>Nhadine Lachica</strong> love <strong>Ace Ventura</strong>.<br>
<small class="text-gray-500">2 days ago at 2:30 am - 11.06.2017</small>
</div>
<div class="clear-both"></div>
</div>
<!-- Feed Element 8 -->
<div class="py-4 border-b border-gray-200">
<a href="#" class="float-left mr-3">
<img
alt="Profile"
class="w-10 h-10 rounded-full"
src="https://bootdey.com/img/Content/avatar/avatar2.png"
>
</a>
<div>
<small class="float-right text-gray-600">46h ago</small>
<strong>Jonas Matias</strong> started following <strong>Luoie Yasay</strong>.<br>
<small class="text-gray-500">3 days ago at 7:58 pm - 5.06.2017</small>
</div>
<div class="clear-both"></div>
</div>
</div>
<!-- Show More Button -->
<button class="w-full mt-3 px-4 py-2 bg-gray-50 hover:bg-gray-100 text-gray-800 border border-gray-300 rounded transition-colors flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
Show More
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>