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 with Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 pt-5">
<!-- Profile Header -->
<div class="bg-cyan-500 rounded p-5 mb-8">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div class="flex items-start gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Profile" class="w-22 h-22 rounded-full flex-shrink-0">
<div class="text-white">
<h4 class="text-lg font-medium mt-1 mb-1">Michael A. Franklin</h4>
<p class="text-sm text-white/90">User Experience Specialist</p>
<p class="text-white/90 mb-0">California, United States</p>
</div>
</div>
<div>
<button type="button" class="bg-white text-gray-700 px-4 py-2 rounded shadow-sm hover:bg-gray-50 transition text-sm font-medium flex items-center gap-2">
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
Edit Profile
</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex flex-wrap -mx-4">
<!-- Left Sidebar -->
<div class="w-full xl:w-1/3 px-4 mb-8">
<!-- Personal Information -->
<div class="bg-white rounded shadow-sm p-5 mb-8">
<h4 class="text-lg font-medium mt-0 mb-4">Personal Information</h4>
<div>
<p class="text-gray-600 text-sm mb-4">Hye, I'm Johnathan Doe residing in this beautiful world. I create websites and mobile apps with great UX and UI design. I have done work with big companies like Nokia, Google and Yahoo. Meet me or Contact me for any queries. One Extra line for filling space. Fill as many you want.</p>
<hr class="my-4 border-gray-200">
<div class="text-left">
<p class="text-gray-600 text-sm mb-3"><strong>Full Name :</strong> <span class="ml-4">Johnathan Deo</span></p>
<p class="text-gray-600 text-sm mb-3"><strong>Mobile :</strong><span class="ml-4">(+12) 123 1234 567</span></p>
<p class="text-gray-600 text-sm mb-3"><strong>Email :</strong> <span class="ml-4">[email protected]</span></p>
<p class="text-gray-600 text-sm mb-3"><strong>Location :</strong> <span class="ml-4">USA</span></p>
<p class="text-gray-600 text-sm mb-3"><strong>Languages :</strong> <span class="ml-2">English, German, Spanish, French</span></p>
</div>
<ul class="flex gap-3 list-none mt-4 mb-0 p-0">
<li>
<a href="#" class="inline-flex items-center justify-center w-8 h-8 bg-blue-600 hover:bg-blue-700 text-white rounded transition">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
</li>
<li>
<a href="#" class="inline-flex items-center justify-center w-8 h-8 bg-blue-400 hover:bg-blue-500 text-white rounded transition">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</li>
<li>
<a href="#" class="inline-flex items-center justify-center w-8 h-8 bg-blue-500 hover:bg-blue-600 text-white rounded transition">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<!-- Messages -->
<div class="bg-white rounded shadow-sm p-5 relative">
<div class="absolute -left-2 top-5 bg-blue-600 text-white text-xs px-3 py-1 shadow-md">Messages</div>
<div class="clear-both mb-4"></div>
<div class="space-y-0">
<a href="#" class="block no-underline hover:bg-gray-50 transition">
<div class="flex items-start gap-4 py-2.5 border-b border-gray-100 relative overflow-hidden">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div class="flex-1 min-w-0">
<p class="text-gray-800 text-sm font-medium mb-0">Tomaslau</p>
<p class="text-gray-500 text-sm mb-0 truncate">I've finished it! See you so...</p>
</div>
<button type="button" class="absolute right-2 top-3 bg-green-500 hover:bg-green-600 text-white text-xs px-2 py-1 rounded transition">Reply</button>
</div>
</a>
<a href="#" class="block no-underline hover:bg-gray-50 transition">
<div class="flex items-start gap-4 py-2.5 border-b border-gray-100 relative overflow-hidden">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div class="flex-1 min-w-0">
<p class="text-gray-800 text-sm font-medium mb-0">Stillnotdavid</p>
<p class="text-gray-500 text-sm mb-0 truncate">This theme is awesome!</p>
</div>
<button type="button" class="absolute right-2 top-3 bg-green-500 hover:bg-green-600 text-white text-xs px-2 py-1 rounded transition">Reply</button>
</div>
</a>
<a href="#" class="block no-underline hover:bg-gray-50 transition">
<div class="flex items-start gap-4 py-2.5 border-b border-gray-100 relative overflow-hidden">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div class="flex-1 min-w-0">
<p class="text-gray-800 text-sm font-medium mb-0">Kurafire</p>
<p class="text-gray-500 text-sm mb-0 truncate">Nice to meet you</p>
</div>
<button type="button" class="absolute right-2 top-3 bg-green-500 hover:bg-green-600 text-white text-xs px-2 py-1 rounded transition">Reply</button>
</div>
</a>
<a href="#" class="block no-underline hover:bg-gray-50 transition">
<div class="flex items-start gap-4 py-2.5 border-b border-gray-100 relative overflow-hidden">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div class="flex-1 min-w-0">
<p class="text-gray-800 text-sm font-medium mb-0">Shahedk</p>
<p class="text-gray-500 text-sm mb-0 truncate">Hey! there I'm available...</p>
</div>
<button type="button" class="absolute right-2 top-3 bg-green-500 hover:bg-green-600 text-white text-xs px-2 py-1 rounded transition">Reply</button>
</div>
</a>
<a href="#" class="block no-underline hover:bg-gray-50 transition">
<div class="flex items-start gap-4 py-2.5 border-b border-gray-100 relative overflow-hidden">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div class="flex-1 min-w-0">
<p class="text-gray-800 text-sm font-medium mb-0">Adhamdannaway</p>
<p class="text-gray-500 text-sm mb-0 truncate">This theme is awesome!</p>
</div>
<button type="button" class="absolute right-2 top-3 bg-green-500 hover:bg-green-600 text-white text-xs px-2 py-1 rounded transition">Reply</button>
</div>
</a>
<a href="#" class="block no-underline hover:bg-gray-50 transition">
<div class="flex items-start gap-4 py-2.5 border-b border-gray-100 relative overflow-hidden">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div class="flex-1 min-w-0">
<p class="text-gray-800 text-sm font-medium mb-0">Tomaslau</p>
<p class="text-gray-500 text-sm mb-0 truncate">I've finished it! See you so...</p>
</div>
<button type="button" class="absolute right-2 top-3 bg-green-500 hover:bg-green-600 text-white text-xs px-2 py-1 rounded transition">Reply</button>
</div>
</a>
<a href="#" class="block no-underline hover:bg-gray-50 transition">
<div class="flex items-start gap-4 py-2.5 relative overflow-hidden">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="w-10 h-10 rounded-full flex-shrink-0" alt="">
<div class="flex-1 min-w-0">
<p class="text-gray-800 text-sm font-medium mb-0">Stillnotdavid</p>
<p class="text-gray-500 text-sm mb-0 truncate">This theme is awesome!</p>
</div>
<button type="button" class="absolute right-2 top-3 bg-green-500 hover:bg-green-600 text-white text-xs px-2 py-1 rounded transition">Reply</button>
</div>
</a>
</div>
</div>
</div>
<!-- Right Content -->
<div class="w-full xl:w-2/3 px-4">
<!-- Stats Cards -->
<div class="flex flex-wrap -mx-4 mb-8">
<div class="w-full sm:w-1/3 px-4 mb-4">
<div class="bg-white rounded shadow-sm p-5 relative">
<svg class="w-6 h-6 text-gray-400 absolute right-5 top-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
</svg>
<h6 class="text-gray-500 text-xs uppercase mt-0 mb-2">Orders</h6>
<h2 class="text-3xl font-semibold mb-2">1,587</h2>
<span class="inline-block bg-cyan-500 text-white text-xs px-2 py-1 rounded">+11%</span>
<span class="text-gray-500 text-sm ml-2">From previous period</span>
</div>
</div>
<div class="w-full sm:w-1/3 px-4 mb-4">
<div class="bg-white rounded shadow-sm p-5 relative">
<svg class="w-6 h-6 text-gray-400 absolute right-5 top-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h6 class="text-gray-500 text-xs uppercase mt-0 mb-2">Revenue</h6>
<h2 class="text-3xl font-semibold mb-2">$46,782</h2>
<span class="inline-block bg-red-500 text-white text-xs px-2 py-1 rounded">-29%</span>
<span class="text-gray-500 text-sm ml-2">From previous period</span>
</div>
</div>
<div class="w-full sm:w-1/3 px-4 mb-4">
<div class="bg-white rounded shadow-sm p-5 relative">
<svg class="w-6 h-6 text-gray-400 absolute right-5 top-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
</svg>
<h6 class="text-gray-500 text-xs uppercase mt-0 mb-2">Product Sold</h6>
<h2 class="text-3xl font-semibold mb-2">1,890</h2>
<span class="inline-block bg-cyan-500 text-white text-xs px-2 py-1 rounded">+89%</span>
<span class="text-gray-500 text-sm ml-2">Last year</span>
</div>
</div>
</div>
<!-- Experience Section -->
<div class="bg-white rounded shadow-sm p-5 mb-8">
<h4 class="text-lg font-medium mt-0 mb-4">Experience</h4>
<div>
<div class="mb-4">
<h5 class="text-cyan-500 font-medium mb-1">Lead designer / Developer</h5>
<p class="mb-1">websitename.com</p>
<p class="font-semibold mb-2">2010-2015</p>
<p class="text-gray-600 text-sm mb-0">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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<hr class="my-4 border-gray-200">
<div>
<h5 class="text-cyan-500 font-medium mb-1">Senior Graphic Designer</h5>
<p class="mb-1">coderthemes.com</p>
<p class="font-semibold mb-2">2007-2009</p>
<p class="text-gray-600 text-sm mb-0">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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
<!-- Projects Table -->
<div class="bg-white rounded shadow-sm p-5">
<h4 class="text-lg font-medium mb-4">My Projects</h4>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-3 px-2 font-medium text-gray-700">#</th>
<th class="text-left py-3 px-2 font-medium text-gray-700">Project Name</th>
<th class="text-left py-3 px-2 font-medium text-gray-700">Start Date</th>
<th class="text-left py-3 px-2 font-medium text-gray-700">Due Date</th>
<th class="text-left py-3 px-2 font-medium text-gray-700">Status</th>
<th class="text-left py-3 px-2 font-medium text-gray-700">Assign</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100">
<td class="py-3 px-2">1</td>
<td class="py-3 px-2">Adminox Admin</td>
<td class="py-3 px-2">01/01/2015</td>
<td class="py-3 px-2">07/05/2015</td>
<td class="py-3 px-2"><span class="inline-block bg-blue-500 text-white text-xs px-2 py-1 rounded">Work in Progress</span></td>
<td class="py-3 px-2">Coderthemes</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3 px-2">2</td>
<td class="py-3 px-2">Adminox Frontend</td>
<td class="py-3 px-2">01/01/2015</td>
<td class="py-3 px-2">07/05/2015</td>
<td class="py-3 px-2"><span class="inline-block bg-green-500 text-white text-xs px-2 py-1 rounded">Pending</span></td>
<td class="py-3 px-2">Coderthemes</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3 px-2">3</td>
<td class="py-3 px-2">Adminox Admin</td>
<td class="py-3 px-2">01/01/2015</td>
<td class="py-3 px-2">07/05/2015</td>
<td class="py-3 px-2"><span class="inline-block bg-pink-500 text-white text-xs px-2 py-1 rounded">Done</span></td>
<td class="py-3 px-2">Coderthemes</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3 px-2">4</td>
<td class="py-3 px-2">Adminox Frontend</td>
<td class="py-3 px-2">01/01/2015</td>
<td class="py-3 px-2">07/05/2015</td>
<td class="py-3 px-2"><span class="inline-block bg-purple-500 text-white text-xs px-2 py-1 rounded">Work in Progress</span></td>
<td class="py-3 px-2">Coderthemes</td>
</tr>
<tr>
<td class="py-3 px-2">5</td>
<td class="py-3 px-2">Adminox Admin</td>
<td class="py-3 px-2">01/01/2015</td>
<td class="py-3 px-2">07/05/2015</td>
<td class="py-3 px-2"><span class="inline-block bg-yellow-500 text-white text-xs px-2 py-1 rounded">Coming soon</span></td>
<td class="py-3 px-2">Coderthemes</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>