Skip to content

Instantly share code, notes, and snippets.

@grim-reapper

grim-reapper/profile-settings.html

Created May 12, 2025 11:55
Show Gist options
  • Save grim-reapper/b54c9dc17ee0e0eb33218c047bb696a4 to your computer and use it in GitHub Desktop.
Save grim-reapper/b54c9dc17ee0e0eb33218c047bb696a4 to your computer and use it in GitHub Desktop.
Download ZIP
Profile Setting Page using HTML and Tailwindcss
Raw
profile-settings.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Settings | Sleek UI</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
'primary-dark': '#4f46e5',
danger: '#ef4444',
'danger-dark': '#dc2626',
}
}
}
}
</script>
<style>
.input-highlight {
transition: all 0.3s ease;
box-shadow: 0 0 0 1px #e2e8f0;
}
.input-highlight:focus {
box-shadow: 0 0 0 2px #6366f1;
}
.toggle-checkbox:checked {
@apply right-0 border-primary;
right: 0;
border-color: #6366f1;
}
.toggle-checkbox:checked + .toggle-label {
@apply bg-primary;
background-color: #6366f1;
}
.smooth-transition {
transition: all 0.3s ease;
}
.modal-overlay {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="max-w-4xl mx-auto px-4 py-8">
<!-- Header -->
<div class="flex items-center justify-between mb-8">
<div>
<h1 class="text-3xl font-bold text-gray-800">Profile Settings</h1>
<p class="text-gray-500">Manage your account information and security</p>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-12 h-12 rounded-full object-cover border-2 border-white shadow">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div>
<p class="font-medium">Sarah Johnson</p>
<p class="text-sm text-gray-500">Admin</p>
</div>
</div>
</div>
<!-- Main Content -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<!-- Navigation Tabs -->
<div class="border-b border-gray-200">
<nav class="flex -mb-px">
<a href="#" class="py-4 px-6 text-center border-b-2 border-primary font-medium text-primary">
<i class="fas fa-user mr-2"></i> Account
</a>
<a href="#" class="py-4 px-6 text-center border-b-2 border-transparent font-medium text-gray-500 hover:text-gray-700">
<i class="fas fa-bell mr-2"></i> Notifications
</a>
<a href="#" class="py-4 px-6 text-center border-b-2 border-transparent font-medium text-gray-500 hover:text-gray-700">
<i class="fas fa-lock mr-2"></i> Security
</a>
<a href="#" class="py-4 px-6 text-center border-b-2 border-transparent font-medium text-gray-500 hover:text-gray-700">
<i class="fas fa-cog mr-2"></i> Preferences
</a>
</nav>
</div>
<!-- Form Sections -->
<div class="p-6">
<!-- Personal Information Section -->
<div class="mb-10">
<h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-id-card mr-2 text-primary"></i> Personal Information
</h2>
<div class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
<div class="relative">
<input type="text" id="firstName" value="Sarah" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-highlight focus:outline-none">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<i class="fas fa-user text-gray-400"></i>
</div>
</div>
</div>
<div>
<label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
<div class="relative">
<input type="text" id="lastName" value="Johnson" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-highlight focus:outline-none">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<i class="fas fa-user text-gray-400"></i>
</div>
</div>
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<div class="relative">
<input type="email" id="email" value="[email protected]" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-highlight focus:outline-none">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<i class="fas fa-envelope text-gray-400"></i>
</div>
</div>
<p class="mt-1 text-xs text-gray-500">This is the email associated with your account</p>
</div>
</div>
<div class="mt-6 flex justify-end">
<button class="px-6 py-2 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg smooth-transition">
Save Changes
</button>
</div>
</div>
<!-- Password Change Section -->
<div class="mb-10 pt-8 border-t border-gray-200">
<h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-key mr-2 text-primary"></i> Change Password
</h2>
<div class="space-y-4">
<div>
<label for="currentPassword" class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
<div class="relative">
<input type="password" id="currentPassword" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-highlight focus:outline-none">
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<i class="fas fa-eye-slash text-gray-400 cursor-pointer toggle-password" data-target="currentPassword"></i>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
<div class="relative">
<input type="password" id="newPassword" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-highlight focus:outline-none">
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<i class="fas fa-eye-slash text-gray-400 cursor-pointer toggle-password" data-target="newPassword"></i>
</div>
</div>
</div>
<div>
<label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
<div class="relative">
<input type="password" id="confirmPassword" class="w-full px-4 py-2 rounded-lg border border-gray-300 input-highlight focus:outline-none">
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<i class="fas fa-eye-slash text-gray-400 cursor-pointer toggle-password" data-target="confirmPassword"></i>
</div>
</div>
</div>
</div>
<div class="bg-blue-50 p-3 rounded-lg">
<p class="text-sm text-blue-800 flex items-start">
<i class="fas fa-info-circle mr-2 mt-0.5"></i>
Your password should be at least 8 characters long and include a mix of uppercase letters, lowercase letters, numbers, and symbols.
</p>
</div>
</div>
<div class="mt-6 flex justify-end">
<button class="px-6 py-2 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg smooth-transition">
Update Password
</button>
</div>
</div>
<!-- Danger Zone Section -->
<div class="pt-8 border-t border-gray-200">
<h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-exclamation-triangle mr-2 text-danger"></i> Danger Zone
</h2>
<div class="bg-red-50 p-4 rounded-lg border border-red-100">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<div class="mb-4 md:mb-0">
<h3 class="font-medium text-red-800">Delete Account</h3>
<p class="text-sm text-red-600">Once you delete your account, there is no going back. Please be certain.</p>
</div>
<button id="deleteAccountBtn" class="px-4 py-2 bg-danger hover:bg-danger-dark text-white font-medium rounded-lg smooth-transition whitespace-nowrap">
Delete Account
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Delete Account Modal -->
<div id="deleteModal" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
<div class="modal-overlay absolute inset-0"></div>
<div class="bg-white rounded-xl shadow-xl z-10 w-full max-w-md smooth-transition transform transition-all scale-95 opacity-0">
<div class="p-6">
<div class="flex items-start">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-red-100">
<i class="fas fa-exclamation text-red-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Delete your account?</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">
Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone.
</p>
</div>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button id="cancelDeleteBtn" type="button" class="px-4 py-2 bg-white hover:bg-gray-50 text-gray-700 font-medium rounded-lg border border-gray-300 smooth-transition">
Cancel
</button>
<button id="confirmDeleteBtn" type="button" class="px-4 py-2 bg-danger hover:bg-danger-dark text-white font-medium rounded-lg smooth-transition">
Delete Account
</button>
</div>
</div>
</div>
</div>
<script>
// Toggle password visibility
document.querySelectorAll('.toggle-password').forEach(icon => {
icon.addEventListener('click', function() {
const targetId = this.getAttribute('data-target');
const input = document.getElementById(targetId);
if (input.type === 'password') {
input.type = 'text';
this.classList.replace('fa-eye-slash', 'fa-eye');
} else {
input.type = 'password';
this.classList.replace('fa-eye', 'fa-eye-slash');
}
});
});
// Delete account modal
const deleteAccountBtn = document.getElementById('deleteAccountBtn');
const deleteModal = document.getElementById('deleteModal');
const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
const modalContent = deleteModal.querySelector('.bg-white');
deleteAccountBtn.addEventListener('click', () => {
deleteModal.classList.remove('hidden');
setTimeout(() => {
modalContent.classList.remove('scale-95', 'opacity-0');
modalContent.classList.add('scale-100', 'opacity-100');
}, 10);
});
cancelDeleteBtn.addEventListener('click', () => {
modalContent.classList.remove('scale-100', 'opacity-100');
modalContent.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
deleteModal.classList.add('hidden');
}, 300);
});
confirmDeleteBtn.addEventListener('click', () => {
// In a real app, you would handle account deletion here
alert('Account deletion request sent. This is a demo.');
modalContent.classList.remove('scale-100', 'opacity-100');
modalContent.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
deleteModal.classList.add('hidden');
}, 300);
});
// Close modal when clicking outside
deleteModal.addEventListener('click', (e) => {
if (e.target === deleteModal) {
modalContent.classList.remove('scale-100', 'opacity-100');
modalContent.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
deleteModal.classList.add('hidden');
}, 300);
}
});
// Form validation would go here in a real application
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment