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>Account Settings - Edit Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 pt-10 min-h-screen text-gray-800">
<div class="max-w-6xl mx-auto px-4">
<div class="flex flex-wrap -mx-3">
<!-- Profile Sidebar -->
<div class="w-full lg:w-1/4 px-3 mb-4">
<div class="bg-white rounded-md h-full shadow-sm">
<div class="p-6">
<!-- User Profile -->
<div class="text-center pb-4 mb-4">
<div class="mb-4">
<img
src="https://bootdey.com/img/Content/avatar/avatar7.png"
alt="Yuki Hayashi"
class="w-24 h-24 rounded-full mx-auto"
>
</div>
<h5 class="font-medium text-gray-800 mb-2">Yuki Hayashi</h5>
<h6 class="text-sm text-gray-400">[email protected]</h6>
</div>
<!-- About Section -->
<div class="mt-8 text-center">
<h5 class="text-blue-600 font-medium mb-4">About</h5>
<p class="text-sm text-gray-600">
I'm Yuki. Full Stack Designer I enjoy creating user-centric, delightful and human experiences.
</p>
</div>
</div>
</div>
</div>
<!-- Main Form -->
<div class="w-full lg:w-3/4 px-3 mb-4">
<div class="bg-white rounded-md h-full shadow-sm">
<div class="p-6">
<!-- Personal Details Section -->
<div class="flex flex-wrap -mx-3">
<div class="w-full px-3 mb-2">
<h6 class="text-blue-600 font-medium mb-2">Personal Details</h6>
</div>
<div class="w-full sm:w-1/2 px-3 mb-4">
<label class="block text-sm text-gray-700 mb-1" for="fullName">
Full Name
</label>
<input
type="text"
id="fullName"
placeholder="Enter full name"
class="w-full px-3 py-2 text-sm text-gray-800 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
</div>
<div class="w-full sm:w-1/2 px-3 mb-4">
<label class="block text-sm text-gray-700 mb-1" for="eMail">
Email
</label>
<input
type="email"
id="eMail"
placeholder="Enter email ID"
class="w-full px-3 py-2 text-sm text-gray-800 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
</div>
<div class="w-full sm:w-1/2 px-3 mb-4">
<label class="block text-sm text-gray-700 mb-1" for="phone">
Phone
</label>
<input
type="text"
id="phone"
placeholder="Enter phone number"
class="w-full px-3 py-2 text-sm text-gray-800 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
</div>
<div class="w-full sm:w-1/2 px-3 mb-4">
<label class="block text-sm text-gray-700 mb-1" for="website">
Website URL
</label>
<input
type="url"
id="website"
placeholder="Website url"
class="w-full px-3 py-2 text-sm text-gray-800 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
</div>
</div>
<!-- Address Section -->
<div class="flex flex-wrap -mx-3">
<div class="w-full px-3 mb-2">
<h6 class="text-blue-600 font-medium mt-3 mb-2">Address</h6>
</div>
<div class="w-full sm:w-1/2 px-3 mb-4">
<label class="block text-sm text-gray-700 mb-1" for="street">
Street
</label>
<input
type="text"
id="street"
placeholder="Enter Street"
class="w-full px-3 py-2 text-sm text-gray-800 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
</div>
<div class="w-full sm:w-1/2 px-3 mb-4">
<label class="block text-sm text-gray-700 mb-1" for="city">
City
</label>
<input
type="text"
id="city"
placeholder="Enter City"
class="w-full px-3 py-2 text-sm text-gray-800 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
</div>
<div class="w-full sm:w-1/2 px-3 mb-4">
<label class="block text-sm text-gray-700 mb-1" for="state">
State
</label>
<input
type="text"
id="state"
placeholder="Enter State"
class="w-full px-3 py-2 text-sm text-gray-800 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
</div>
<div class="w-full sm:w-1/2 px-3 mb-4">
<label class="block text-sm text-gray-700 mb-1" for="zip">
Zip Code
</label>
<input
type="text"
id="zip"
placeholder="Zip Code"
class="w-full px-3 py-2 text-sm text-gray-800 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
</div>
</div>
<!-- Action Buttons -->
<div class="flex justify-end gap-3 mt-4">
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded hover:bg-gray-300 transition-colors"
>
Cancel
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded hover:bg-blue-700 transition-colors"
>
Update
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>