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 Data and Skills</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 text-gray-900">
<div class="container mx-auto px-4 py-5">
<!-- Breadcrumb -->
<nav class="mb-8">
<ol class="flex space-x-2 text-sm">
<li><a href="javascript:void(0)" class="text-blue-600 hover:text-blue-800">Home</a></li>
<li class="text-gray-500">/</li>
<li><a href="javascript:void(0)" class="text-blue-600 hover:text-blue-800">User</a></li>
<li class="text-gray-500">/</li>
<li class="text-gray-600">User Profile</li>
</ol>
</nav>
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
<!-- Left Column -->
<div class="md:col-span-4">
<!-- Profile Card -->
<div class="bg-white rounded shadow-md mb-4">
<div class="p-6">
<div class="flex flex-col items-center text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Admin" class="rounded-full w-36 h-36">
<div class="mt-4">
<h4 class="text-xl font-semibold">John Doe</h4>
<p class="text-gray-600 mb-1">Full Stack Developer</p>
<p class="text-gray-500 text-sm">Bay Area, San Francisco, CA</p>
<button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Follow</button>
<button class="mt-2 border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-50">Message</button>
</div>
</div>
</div>
</div>
<!-- Social Links Card -->
<div class="bg-white rounded shadow-md">
<ul class="divide-y">
<li class="px-6 py-3 flex justify-between items-center flex-wrap">
<h6 class="flex items-center font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
Website
</h6>
<span class="text-gray-600">https://bootdey.com</span>
</li>
<li class="px-6 py-3 flex justify-between items-center flex-wrap">
<h6 class="flex items-center font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
Github
</h6>
<span class="text-gray-600">bootdey</span>
</li>
<li class="px-6 py-3 flex justify-between items-center flex-wrap">
<h6 class="flex items-center font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 text-blue-400">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
Twitter
</h6>
<span class="text-gray-600">@bootdey</span>
</li>
<li class="px-6 py-3 flex justify-between items-center flex-wrap">
<h6 class="flex items-center font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 text-red-500">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
Instagram
</h6>
<span class="text-gray-600">bootdey</span>
</li>
<li class="px-6 py-3 flex justify-between items-center flex-wrap">
<h6 class="flex items-center font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 text-blue-600">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
Facebook
</h6>
<span class="text-gray-600">bootdey</span>
</li>
</ul>
</div>
</div>
<!-- Right Column -->
<div class="md:col-span-8">
<!-- Profile Details Card -->
<div class="bg-white rounded shadow-md mb-4">
<div class="p-6">
<div class="grid grid-cols-3 gap-4 mb-4">
<div class="col-span-1">
<h6 class="font-semibold">Full Name</h6>
</div>
<div class="col-span-2 text-gray-600">
Kenneth Valdez
</div>
</div>
<hr class="my-4">
<div class="grid grid-cols-3 gap-4 mb-4">
<div class="col-span-1">
<h6 class="font-semibold">Email</h6>
</div>
<div class="col-span-2 text-gray-600">
[email protected]
</div>
</div>
<hr class="my-4">
<div class="grid grid-cols-3 gap-4 mb-4">
<div class="col-span-1">
<h6 class="font-semibold">Phone</h6>
</div>
<div class="col-span-2 text-gray-600">
(239) 816-9029
</div>
</div>
<hr class="my-4">
<div class="grid grid-cols-3 gap-4 mb-4">
<div class="col-span-1">
<h6 class="font-semibold">Mobile</h6>
</div>
<div class="col-span-2 text-gray-600">
(320) 380-4539
</div>
</div>
<hr class="my-4">
<div class="grid grid-cols-3 gap-4 mb-4">
<div class="col-span-1">
<h6 class="font-semibold">Address</h6>
</div>
<div class="col-span-2 text-gray-600">
Bay Area, San Francisco, CA
</div>
</div>
<hr class="my-4">
<div>
<a class="bg-blue-500 text-white px-4 py-2 rounded inline-block hover:bg-blue-600" href="#">Edit</a>
</div>
</div>
</div>
<!-- Project Status Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-white rounded shadow-md h-full">
<div class="p-6">
<h6 class="flex items-center mb-4 font-semibold">
<span class="text-blue-500 mr-2">?</span>Project Status
</h6>
<div class="space-y-3">
<div>
<small class="text-sm">Web Design</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 80%"></div>
</div>
</div>
<div>
<small class="text-sm">Website Markup</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 72%"></div>
</div>
</div>
<div>
<small class="text-sm">One Page</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 89%"></div>
</div>
</div>
<div>
<small class="text-sm">Mobile Template</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 55%"></div>
</div>
</div>
<div>
<small class="text-sm">Backend API</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 66%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded shadow-md h-full">
<div class="p-6">
<h6 class="flex items-center mb-4 font-semibold">
<span class="text-blue-500 mr-2">?</span>Project Status
</h6>
<div class="space-y-3">
<div>
<small class="text-sm">Web Design</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 80%"></div>
</div>
</div>
<div>
<small class="text-sm">Website Markup</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 72%"></div>
</div>
</div>
<div>
<small class="text-sm">One Page</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 89%"></div>
</div>
</div>
<div>
<small class="text-sm">Mobile Template</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 55%"></div>
</div>
</div>
<div>
<small class="text-sm">Backend API</small>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 66%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>