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>Gallery Images Profile</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 pt-5">
<div class="container mx-auto px-4 max-w-7xl">
<div class="flex flex-wrap -mx-4">
<!-- Left Sidebar -->
<div class="w-full lg:w-1/4 md:w-1/3 px-4 mb-5">
<!-- Profile Card -->
<div class="text-center bg-white p-5 rounded shadow-sm mb-5">
<div class="mb-2.5">
<div class="mx-auto mb-2.5 w-24 h-24">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="rounded-full w-full h-full object-cover border-4 border-gray-200" alt="profile-image">
</div>
<h4 class="mb-1.5 text-lg font-semibold">John J. Doe</h4>
<p class="text-gray-500 mb-0">@johndoe</p>
</div>
<button type="button" class="bg-green-500 text-white px-4 py-1.5 text-sm rounded mt-2.5 mr-1 hover:bg-green-600 transition">Follow</button>
<button type="button" class="bg-red-500 text-white px-4 py-1.5 text-sm rounded mt-2.5 hover:bg-red-600 transition">Message</button>
<div class="text-left mt-10">
<p class="text-gray-500 text-sm mb-2"><strong>Full Name :</strong> <span class="ml-4">Johnathan Deo</span></p>
<p class="text-gray-500 text-sm mb-2"><strong>Mobile :</strong><span class="ml-4">(123) 123 1234</span></p>
<p class="text-gray-500 text-sm mb-2"><strong>Email :</strong> <span class="ml-4">[email protected]</span></p>
<p class="text-gray-500 text-sm mb-2"><strong>Location :</strong> <span class="ml-4">USA</span></p>
</div>
<ul class="flex justify-center gap-2 mt-7 mb-0 list-none p-0">
<li>
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 text-gray-600 inline-flex items-center justify-center hover:bg-blue-500 hover:text-white 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="w-8 h-8 rounded-full bg-gray-200 text-gray-600 inline-flex items-center justify-center hover:bg-blue-400 hover:text-white 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="w-8 h-8 rounded-full bg-gray-200 text-gray-600 inline-flex items-center justify-center hover:bg-blue-600 hover:text-white 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>
<!-- Skills Card -->
<div class="bg-white p-5 rounded shadow-sm">
<h4 class="mt-0 mb-5 text-sm font-semibold uppercase tracking-wider">Skills</h4>
<div class="pb-2.5">
<p class="mb-2 text-sm">HTML5</p>
<div class="w-full bg-gray-200 rounded h-1.5 mb-5">
<div class="bg-blue-500 h-1.5 rounded" style="width: 80%"></div>
</div>
<p class="mb-2 text-sm">PHP</p>
<div class="w-full bg-gray-200 rounded h-1.5 mb-5">
<div class="bg-blue-500 h-1.5 rounded" style="width: 60%"></div>
</div>
<p class="mb-2 text-sm">Wordpress</p>
<div class="w-full bg-gray-200 rounded h-1.5 mb-0">
<div class="bg-blue-500 h-1.5 rounded" style="width: 70%"></div>
</div>
</div>
</div>
</div>
<!-- Right Content -->
<div class="w-full md:w-2/3 lg:w-3/4 px-4">
<div class="bg-white rounded shadow-sm">
<!-- Tabs Navigation -->
<ul class="flex border-b border-gray-200 mb-0 list-none p-0" role="tablist">
<li class="mr-0">
<a href="#" onclick="showTab(event, 'about')" class="inline-block py-3 px-5 text-xs font-medium text-gray-600 border-t-2 border-transparent hover:text-blue-500 transition">
<span class="hidden sm:inline">ABOUT ME</span>
<span class="sm:hidden">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
</svg>
</span>
</a>
</li>
<li class="mr-0">
<a href="#" onclick="showTab(event, 'gallery')" class="inline-block py-3 px-5 text-xs font-medium text-blue-500 border-t-2 border-blue-500 transition tab-active">
<span class="hidden sm:inline">GALLERY</span>
<span class="sm:hidden">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
</svg>
</span>
</a>
</li>
<li class="mr-0">
<a href="#" onclick="showTab(event, 'settings')" class="inline-block py-3 px-5 text-xs font-medium text-gray-600 border-t-2 border-transparent hover:text-blue-500 transition">
<span class="hidden sm:inline">SETTINGS</span>
<span class="sm:hidden">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
</svg>
</span>
</a>
</li>
</ul>
<!-- Tab Content -->
<div class="p-5">
<!-- About Me Tab -->
<div id="about" class="tab-pane hidden">
<p class="mb-1.5">Hi I'm Johnathn Deo, has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<div class="mt-7">
<h4 class="text-base font-semibold mb-3">Experience</h4>
<div class="pt-2.5">
<h5 class="text-blue-500 mb-1.5 font-semibold">Lead designer / Developer</h5>
<p class="mb-1">websitename.com</p>
<p class="mb-2"><strong>2010-2015</strong></p>
<p class="text-gray-500 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-5 border-gray-200">
<div>
<h5 class="text-blue-500 mb-1.5 font-semibold">Senior Graphic Designer</h5>
<p class="mb-1">coderthemes.com</p>
<p class="mb-2"><strong>2007-2009</strong></p>
<p class="text-gray-500 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>
<!-- Gallery Tab -->
<div id="gallery" class="tab-pane">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
<!-- Gallery Item 1 -->
<div class="bg-white rounded shadow-sm p-2.5">
<a href="#" class="block rounded-sm overflow-hidden mb-2">
<img src="https://www.bootdey.com/image/400x300/008B8B/00000" class="w-full h-auto" alt="work-thumbnail">
</a>
<h4 class="text-center mx-auto w-4/5 whitespace-nowrap overflow-hidden text-ellipsis my-4 text-base">Gallery Image</h4>
<div class="h-0.5 w-10 bg-blue-500 mx-auto my-2.5"></div>
<p class="text-gray-500 text-center mb-0"><small>Photography</small></p>
</div>
<!-- Gallery Item 2 -->
<div class="bg-white rounded shadow-sm p-2.5">
<a href="#" class="block rounded-sm overflow-hidden mb-2">
<img src="https://www.bootdey.com/image/400x300/FF7F50/00000" class="w-full h-auto" alt="work-thumbnail">
</a>
<h4 class="text-center mx-auto w-4/5 whitespace-nowrap overflow-hidden text-ellipsis my-4 text-base">Gallery Image</h4>
<div class="h-0.5 w-10 bg-blue-500 mx-auto my-2.5"></div>
<p class="text-gray-500 text-center mb-0"><small>Photography</small></p>
</div>
<!-- Gallery Item 3 -->
<div class="bg-white rounded shadow-sm p-2.5">
<a href="#" class="block rounded-sm overflow-hidden mb-2">
<img src="https://www.bootdey.com/image/400x300/6495ED/00000" class="w-full h-auto" alt="work-thumbnail">
</a>
<h4 class="text-center mx-auto w-4/5 whitespace-nowrap overflow-hidden text-ellipsis my-4 text-base">Gallery Image</h4>
<div class="h-0.5 w-10 bg-blue-500 mx-auto my-2.5"></div>
<p class="text-gray-500 text-center mb-0"><small>Photography</small></p>
</div>
<!-- Gallery Item 4 -->
<div class="bg-white rounded shadow-sm p-2.5">
<a href="#" class="block rounded-sm overflow-hidden mb-2">
<img src="https://www.bootdey.com/image/400x300/4169E1/00000" class="w-full h-auto" alt="work-thumbnail">
</a>
<h4 class="text-center mx-auto w-4/5 whitespace-nowrap overflow-hidden text-ellipsis my-4 text-base">Gallery Image</h4>
<div class="h-0.5 w-10 bg-blue-500 mx-auto my-2.5"></div>
<p class="text-gray-500 text-center mb-0"><small>Photography</small></p>
</div>
<!-- Gallery Item 5 -->
<div class="bg-white rounded shadow-sm p-2.5">
<a href="#" class="block rounded-sm overflow-hidden mb-2">
<img src="https://www.bootdey.com/image/400x300/B0E0E6/00000" class="w-full h-auto" alt="work-thumbnail">
</a>
<h4 class="text-center mx-auto w-4/5 whitespace-nowrap overflow-hidden text-ellipsis my-4 text-base">Gallery Image</h4>
<div class="h-0.5 w-10 bg-blue-500 mx-auto my-2.5"></div>
<p class="text-gray-500 text-center mb-0"><small>Photography</small></p>
</div>
<!-- Gallery Item 6 -->
<div class="bg-white rounded shadow-sm p-2.5">
<a href="#" class="block rounded-sm overflow-hidden mb-2">
<img src="https://www.bootdey.com/image/400x300/4169E1/00000" class="w-full h-auto" alt="work-thumbnail">
</a>
<h4 class="text-center mx-auto w-4/5 whitespace-nowrap overflow-hidden text-ellipsis my-4 text-base">Gallery Image</h4>
<div class="h-0.5 w-10 bg-blue-500 mx-auto my-2.5"></div>
<p class="text-gray-500 text-center mb-0"><small>Photography</small></p>
</div>
</div>
</div>
<!-- Settings Tab -->
<div id="settings" class="tab-pane hidden">
<form>
<div class="mb-4">
<label for="FullName" class="block mb-2 text-sm font-medium">Full Name</label>
<input type="text" value="John Doe" id="FullName" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="Email" class="block mb-2 text-sm font-medium">Email</label>
<input type="email" value="[email protected]" id="Email" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="Username" class="block mb-2 text-sm font-medium">Username</label>
<input type="text" value="john" id="Username" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="Password" class="block mb-2 text-sm font-medium">Password</label>
<input type="password" placeholder="6 - 15 Characters" id="Password" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="RePassword" class="block mb-2 text-sm font-medium">Re-Password</label>
<input type="password" placeholder="6 - 15 Characters" id="RePassword" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="AboutMe" class="block mb-2 text-sm font-medium">About Me</label>
<textarea id="AboutMe" rows="5" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
</div>
<button class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition" type="submit">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function showTab(event, tabName) {
event.preventDefault();
// Hide all tab panes
const tabPanes = document.querySelectorAll('.tab-pane');
tabPanes.forEach(pane => {
pane.classList.add('hidden');
});
// Remove active class from all tabs
const tabs = document.querySelectorAll('ul[role="tablist"] a');
tabs.forEach(tab => {
tab.classList.remove('text-blue-500', 'border-blue-500', 'tab-active');
tab.classList.add('text-gray-600', 'border-transparent');
});
// Show selected tab pane
document.getElementById(tabName).classList.remove('hidden');
// Add active class to clicked tab
event.currentTarget.classList.remove('text-gray-600', 'border-transparent');
event.currentTarget.classList.add('text-blue-500', 'border-blue-500', 'tab-active');
}
</script>
</body>
</html>