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>Edit Profile - Account Details (Tailwind)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #f2f6fc;
}
</style>
</head>
<body class="mt-5 text-gray-500">
<div class="max-w-6xl mx-auto px-4 mt-4">
<!-- Account page navigation-->
<nav class="flex space-x-4">
<a class="text-blue-600 border-b-2 border-blue-600 py-2 px-0" href="#">Profile</a>
<a class="text-gray-500 border-b-2 border-transparent hover:text-blue-600 hover:border-blue-600 py-2 px-0 transition-colors" href="#">Billing</a>
<a class="text-gray-500 border-b-2 border-transparent hover:text-blue-600 hover:border-blue-600 py-2 px-0 transition-colors" href="#">Security</a>
<a class="text-gray-500 border-b-2 border-transparent hover:text-blue-600 hover:border-blue-600 py-2 px-0 transition-colors" href="#">Notifications</a>
</nav>
<hr class="mt-0 mb-4 border-gray-200">
<div class="flex flex-wrap -mx-3">
<!-- Profile Picture Card -->
<div class="w-full xl:w-1/3 px-3 mb-4">
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="px-5 py-4 bg-gray-50 border-b border-gray-200 font-medium text-gray-700">
Profile Picture
</div>
<div class="p-6 text-center">
<!-- Profile picture image-->
<img class="h-40 w-40 rounded-full mx-auto mb-2 object-cover" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="Profile Picture">
<!-- Profile picture help block-->
<div class="text-sm italic text-gray-400 mb-4">JPG or PNG no larger than 5 MB</div>
<!-- Profile picture upload button-->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition-colors" type="button">
Upload new image
</button>
</div>
</div>
</div>
<!-- Account Details Card -->
<div class="w-full xl:w-2/3 px-3 mb-4">
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="px-5 py-4 bg-gray-50 border-b border-gray-200 font-medium text-gray-700">
Account Details
</div>
<div class="p-6">
<form>
<!-- Form Group (username)-->
<div class="mb-4">
<label class="block text-sm text-gray-600 mb-1" for="inputUsername">
Username (how your name will appear to other users on the site)
</label>
<input
class="w-full px-4 py-3 text-sm text-gray-500 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
id="inputUsername"
type="text"
placeholder="Enter your username"
value="username"
>
</div>
<!-- Form Row-->
<div class="flex flex-wrap -mx-2 mb-4">
<!-- Form Group (first name)-->
<div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
<label class="block text-sm text-gray-600 mb-1" for="inputFirstName">First name</label>
<input
class="w-full px-4 py-3 text-sm text-gray-500 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
id="inputFirstName"
type="text"
placeholder="Enter your first name"
value="Valerie"
>
</div>
<!-- Form Group (last name)-->
<div class="w-full md:w-1/2 px-2">
<label class="block text-sm text-gray-600 mb-1" for="inputLastName">Last name</label>
<input
class="w-full px-4 py-3 text-sm text-gray-500 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
id="inputLastName"
type="text"
placeholder="Enter your last name"
value="Luna"
>
</div>
</div>
<!-- Form Row -->
<div class="flex flex-wrap -mx-2 mb-4">
<!-- Form Group (organization name)-->
<div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
<label class="block text-sm text-gray-600 mb-1" for="inputOrgName">Organization name</label>
<input
class="w-full px-4 py-3 text-sm text-gray-500 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
id="inputOrgName"
type="text"
placeholder="Enter your organization name"
value="Start Bootstrap"
>
</div>
<!-- Form Group (location)-->
<div class="w-full md:w-1/2 px-2">
<label class="block text-sm text-gray-600 mb-1" for="inputLocation">Location</label>
<input
class="w-full px-4 py-3 text-sm text-gray-500 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
id="inputLocation"
type="text"
placeholder="Enter your location"
value="San Francisco, CA"
>
</div>
</div>
<!-- Form Group (email address)-->
<div class="mb-4">
<label class="block text-sm text-gray-600 mb-1" for="inputEmailAddress">Email address</label>
<input
class="w-full px-4 py-3 text-sm text-gray-500 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
id="inputEmailAddress"
type="email"
placeholder="Enter your email address"
value="[email protected]"
>
</div>
<!-- Form Row-->
<div class="flex flex-wrap -mx-2 mb-4">
<!-- Form Group (phone number)-->
<div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
<label class="block text-sm text-gray-600 mb-1" for="inputPhone">Phone number</label>
<input
class="w-full px-4 py-3 text-sm text-gray-500 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
id="inputPhone"
type="tel"
placeholder="Enter your phone number"
value="555-123-4567"
>
</div>
<!-- Form Group (birthday)-->
<div class="w-full md:w-1/2 px-2">
<label class="block text-sm text-gray-600 mb-1" for="inputBirthday">Birthday</label>
<input
class="w-full px-4 py-3 text-sm text-gray-500 bg-white border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
id="inputBirthday"
type="text"
name="birthday"
placeholder="Enter your birthday"
value="06/10/1988"
>
</div>
</div>
<!-- Save changes button-->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition-colors" type="button">
Save changes
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>