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 Edit Data and Skills</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 mt-5">
<div class="container mx-auto px-4">
<div class="flex flex-wrap -mx-2">
<!-- Left Column -->
<div class="w-full lg:w-1/3 px-2 mb-6">
<div class="bg-white rounded shadow-lg mb-6">
<div class="p-6">
<div class="flex flex-col items-center text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Admin" class="rounded-full p-1 bg-blue-600 w-28 h-28">
<div class="mt-3">
<h4 class="text-xl font-semibold">John Doe</h4>
<p class="text-gray-600 mb-1">Full Stack Developer</p>
<p class="text-gray-400 text-sm">Bay Area, San Francisco, CA</p>
<button class="bg-blue-600 text-white px-4 py-2 rounded mt-2 mr-2 hover:bg-blue-700">Follow</button>
<button class="border border-blue-600 text-blue-600 px-4 py-2 rounded mt-2 hover:bg-blue-50">Message</button>
</div>
</div>
<hr class="my-4 border-gray-200">
<ul class="space-y-0">
<li class="flex justify-between items-center flex-wrap py-3 px-4 border-b border-gray-200">
<h6 class="mb-0 flex items-center font-semibold">
<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="flex justify-between items-center flex-wrap py-3 px-4 border-b border-gray-200">
<h6 class="mb-0 flex items-center font-semibold">
<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="flex justify-between items-center flex-wrap py-3 px-4 border-b border-gray-200">
<h6 class="mb-0 flex items-center font-semibold">
<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="flex justify-between items-center flex-wrap py-3 px-4 border-b border-gray-200">
<h6 class="mb-0 flex items-center font-semibold">
<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="flex justify-between items-center flex-wrap py-3 px-4">
<h6 class="mb-0 flex items-center font-semibold">
<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>
</div>
<!-- Right Column -->
<div class="w-full lg:w-2/3 px-2">
<div class="bg-white rounded shadow-lg mb-6">
<div class="p-6">
<div class="flex flex-wrap mb-3">
<div class="w-full sm:w-1/4 mb-2 sm:mb-0">
<h6 class="mb-0 font-semibold">Full Name</h6>
</div>
<div class="w-full sm:w-3/4">
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" value="John Doe">
</div>
</div>
<div class="flex flex-wrap mb-3">
<div class="w-full sm:w-1/4 mb-2 sm:mb-0">
<h6 class="mb-0 font-semibold">Email</h6>
</div>
<div class="w-full sm:w-3/4">
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" value="[email protected]">
</div>
</div>
<div class="flex flex-wrap mb-3">
<div class="w-full sm:w-1/4 mb-2 sm:mb-0">
<h6 class="mb-0 font-semibold">Phone</h6>
</div>
<div class="w-full sm:w-3/4">
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" value="(239) 816-9029">
</div>
</div>
<div class="flex flex-wrap mb-3">
<div class="w-full sm:w-1/4 mb-2 sm:mb-0">
<h6 class="mb-0 font-semibold">Mobile</h6>
</div>
<div class="w-full sm:w-3/4">
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" value="(320) 380-4539">
</div>
</div>
<div class="flex flex-wrap mb-3">
<div class="w-full sm:w-1/4 mb-2 sm:mb-0">
<h6 class="mb-0 font-semibold">Address</h6>
</div>
<div class="w-full sm:w-3/4">
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" value="Bay Area, San Francisco, CA">
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full sm:w-1/4"></div>
<div class="w-full sm:w-3/4">
<input type="button" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 cursor-pointer" value="Save Changes">
</div>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-2">
<div class="w-full px-2">
<div class="bg-white rounded shadow-lg">
<div class="p-6">
<h5 class="flex items-center mb-3 text-lg font-semibold">Project Status</h5>
<p class="mb-1">Web Design</p>
<div class="w-full bg-gray-200 rounded mb-3 h-1.5">
<div class="bg-blue-600 h-1.5 rounded" style="width: 80%"></div>
</div>
<p class="mb-1">Website Markup</p>
<div class="w-full bg-gray-200 rounded mb-3 h-1.5">
<div class="bg-red-600 h-1.5 rounded" style="width: 72%"></div>
</div>
<p class="mb-1">One Page</p>
<div class="w-full bg-gray-200 rounded mb-3 h-1.5">
<div class="bg-green-600 h-1.5 rounded" style="width: 89%"></div>
</div>
<p class="mb-1">Mobile Template</p>
<div class="w-full bg-gray-200 rounded mb-3 h-1.5">
<div class="bg-yellow-500 h-1.5 rounded" style="width: 55%"></div>
</div>
<p class="mb-1">Backend API</p>
<div class="w-full bg-gray-200 rounded h-1.5">
<div class="bg-cyan-500 h-1.5 rounded" style="width: 66%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>