Tailwind CSS Profile Forms Collection

A collection of custom Tailwind CSS profile and account settings forms. These components provide clean, responsive designs suitable for user dashboards, settings pages, and profile management interfaces.

Built with Tailwind's utility-first approach, they are easy to integrate and customize. Copy the HTML structure and adjust the classes to fit your specific design system.

Basic Profile Info Form

First name

Last name

About

Write a few sentences about yourself.

Location

Website

http://

<!-- Basic Profile Info Form -->
<div class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md">
    <form action="#" method="POST">
        <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
            <div class="sm:col-span-3">
                <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label>
                <div class="mt-1">
                    <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="John">
                </div>
            </div>

            <div class="sm:col-span-3">
                <label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label>
                <div class="mt-1">
                    <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Doe">
                </div>
            </div>

            <div class="sm:col-span-6">
                <label for="about" class="block text-sm font-medium text-gray-700">About</label>
                <div class="mt-1">
                    <textarea id="about" name="about" rows="3" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Brief description for your profile..."></textarea>
                </div>
                <p class="mt-2 text-sm text-gray-500">Write a few sentences about yourself.</p>
            </div>

             <div class="sm:col-span-6">
                 <label for="location" class="block text-sm font-medium text-gray-700">Location</label>
                 <div class="mt-1">
                     <input type="text" name="location" id="location" autocomplete="address-level2" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="City, Country">
                 </div>
             </div>

             <div class="sm:col-span-6">
                <label for="website" class="block text-sm font-medium text-gray-700">Website</label>
                <div class="mt-1 flex rounded-md shadow-sm">
                    <span class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">http://</span>
                    <input type="text" name="website" id="website" class="block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="www.example.com">
                </div>
            </div>
        </div>

        <div class="mt-6 pt-5 border-t border-gray-200">
            <div class="flex justify-end">
                <button type="button" class="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Cancel</button>
                <button type="submit" class="ml-3 inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Save</button>
            </div>
        </div>
    </form>
</div>

Profile Photo Upload/Change Form

Photo

Change

JPG, GIF or PNG. 1MB max.

<!-- Profile Photo Upload/Change Form -->
<div class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md">
    <form action="#" method="POST">
        <div>
            <label class="block text-sm font-medium text-gray-700">Photo</label>
            <div class="mt-1 flex items-center space-x-5">
                <span class="inline-block h-16 w-16 overflow-hidden rounded-full bg-gray-100">
                    <!-- Current Photo Placeholder -->
                    <img class="h-full w-full text-gray-300 object-cover" src="https://picsum.photos/100/100" alt="Current Profile Photo">
                    <!-- Or use SVG if no photo:
                    <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
                       <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                     </svg>
                     -->
                </span>
                <label for="file-upload" class="cursor-pointer rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2">
                    <span>Change</span>
                    <input id="file-upload" name="file-upload" type="file" class="sr-only">
                </label>
                <button type="button" class="rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50">Remove</button>
            </div>
            <p class="mt-2 text-sm text-gray-500">JPG, GIF or PNG. 1MB max.</p>
        </div>

        <div class="mt-6 pt-5 border-t border-gray-200">
           <div class="flex justify-end">
               <button type="button" class="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Cancel</button>
               <button type="submit" class="ml-3 inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Save</button>
           </div>
       </div>
    </form>
</div>

Email Address Change Form

Current Email Address

New Email Address

Confirm New Email Address

<!-- Email Address Change Form -->
<div class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md">
    <form action="#" method="POST" class="space-y-6">
        <div>
            <label for="current-email" class="block text-sm font-medium text-gray-700">Current Email Address</label>
            <div class="mt-1">
                <input id="current-email" name="current-email" type="email" autocomplete="email" readonly value="user@example.com" class="block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm cursor-not-allowed">
            </div>
        </div>

        <div>
            <label for="new-email" class="block text-sm font-medium text-gray-700">New Email Address</label>
            <div class="mt-1">
                <input id="new-email" name="new-email" type="email" autocomplete="email" required class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="new.email@example.com">
            </div>
        </div>

        <div>
            <label for="confirm-email" class="block text-sm font-medium text-gray-700">Confirm New Email Address</label>
            <div class="mt-1">
                <input id="confirm-email" name="confirm-email" type="email" required class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Confirm new email">
            </div>
        </div>

        <div class="pt-5 border-t border-gray-200">
            <div class="flex justify-end">
                <button type="button" class="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Cancel</button>
                <button type="submit" class="ml-3 inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Update Email</button>
            </div>
        </div>
    </form>
</div>

Username Update Form

Current Username

New Username

example.com/

Must be unique. Only letters, numbers, underscores allowed.

<!-- Username Update Form -->
<div class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md">
    <form action="#" method="POST" class="space-y-6">
        <div>
            <label for="current-username" class="block text-sm font-medium text-gray-700">Current Username</label>
            <div class="mt-1">
                <input id="current-username" name="current-username" type="text" readonly value="current_user" class="block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm cursor-not-allowed">
            </div>
        </div>

        <div>
            <label for="new-username" class="block text-sm font-medium text-gray-700">New Username</label>
            <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">example.com/</span>
                <input type="text" name="new-username" id="new-username" autocomplete="username" required class="block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="new_username">
            </div>
            <p class="mt-2 text-sm text-gray-500">Must be unique. Only letters, numbers, underscores allowed.</p>
        </div>

        <div class="pt-5 border-t border-gray-200">
            <div class="flex justify-end">
                <button type="button" class="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Cancel</button>
                <button type="submit" class="ml-3 inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Update Username</button>
            </div>
        </div>
    </form>
</div>

Two-Factor Authentication (2FA) Setup

Enable Two-Factor Authentication

Add an extra layer of security to your account.

Choose Method:

Authenticator App SMS Text Message

Scan the QR code with your authenticator app (e.g., Google Authenticator, Authy).

Or enter this code manually: ABCD EFGH IJKL MNOP

Verification Code

<!-- Two-Factor Authentication (2FA) Setup Form -->
<div class="max-w-lg bg-white rounded-lg shadow-md p-6 border border-gray-200">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Enable Two-Factor Authentication</h3>
    <p class="text-sm text-gray-600 mb-6">Add an extra layer of security to your account.</p>

    <form class="space-y-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Choose Method:</label>
            <div class="flex items-center space-x-4">
                <label class="flex items-center space-x-2 cursor-pointer p-3 border border-gray-300 rounded-md hover:bg-gray-50 has-[:checked]:border-blue-500 has-[:checked]:ring-1 has-[:checked]:ring-blue-500">
                    <input type="radio" name="2fa_method" value="app" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" checked>
                    <span class="text-sm text-gray-700">Authenticator App</span>
                </label>
                 <label class="flex items-center space-x-2 cursor-pointer p-3 border border-gray-300 rounded-md hover:bg-gray-50 has-[:checked]:border-blue-500 has-[:checked]:ring-1 has-[:checked]:ring-blue-500">
                    <input type="radio" name="2fa_method" value="sms" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
                    <span class="text-sm text-gray-700">SMS Text Message</span>
                </label>
            </div>
        </div>

        <!-- Placeholder for Authenticator App Setup -->
        <div class="border-t pt-6 space-y-4">
             <p class="text-sm text-gray-600">Scan the QR code with your authenticator app (e.g., Google Authenticator, Authy).</p>
             <div class="flex justify-center">
                 <img src="https://picsum.photos/150/150?grayscale" alt="QR Code Placeholder" class="border border-gray-300 p-1">
             </div>
             <p class="text-xs text-gray-500 text-center">Or enter this code manually: <code class="bg-gray-100 p-1 rounded">ABCD EFGH IJKL MNOP</code></p>
             <div>
                <label for="verification-code" class="block text-sm font-medium text-gray-700">Verification Code</label>
                <input type="text" id="verification-code" name="verification_code" inputmode="numeric" pattern="[0-9]*" maxlength="6" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Enter 6-digit code">
             </div>
        </div>

        <!-- Placeholder for SMS Setup (could be shown conditionally) -->
        <!--
        <div class="border-t pt-6 space-y-4 hidden">
            <p class="text-sm text-gray-600">We'll send a verification code to your registered phone number ending in ****1234.</p>
             <div>
                <label for="sms-verification-code" class="block text-sm font-medium text-gray-700">Verification Code</label>
                <input type="text" id="sms-verification-code" name="sms_verification_code" inputmode="numeric" pattern="[0-9]*" maxlength="6" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Enter 6-digit code">
             </div>
        </div>
        -->

        <div class="flex justify-end pt-4">
            <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-3">
                Cancel
            </button>
            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Enable 2FA
            </button>
        </div>
    </form>
</div>

Security Questions Setup/Edit

Manage Security Questions

These questions help verify your identity if you need to recover your account.

Question 1

Question 2

Question 3

<!-- Security Questions Setup/Edit Form -->
<div class="max-w-lg bg-white rounded-lg shadow-md p-6 border border-gray-200">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Manage Security Questions</h3>
    <p class="text-sm text-gray-600 mb-6">These questions help verify your identity if you need to recover your account.</p>

    <form class="space-y-6">
        <!-- Question 1 -->
        <div class="space-y-2">
            <label for="security-q1" class="block text-sm font-medium text-gray-700">Question 1</label>
            <select id="security-q1" name="security_q1" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                <option>Select a question...</option>
                <option>What was the name of your first pet?</option>
                <option>What is your mother's maiden name?</option>
                <option>What city were you born in?</option>
                <option>What was the make of your first car?</option>
            </select>
            <label for="security-a1" class="sr-only">Answer 1</label>
            <input type="text" id="security-a1" name="security_a1" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Your Answer">
        </div>

         <!-- Question 2 -->
        <div class="space-y-2">
            <label for="security-q2" class="block text-sm font-medium text-gray-700">Question 2</label>
            <select id="security-q2" name="security_q2" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                <option>Select a question...</option>
                <option>What is the name of your favorite childhood friend?</option>
                <option>In what city did you meet your spouse/partner?</option>
                <option>What street did you live on in third grade?</option>
                <option>What is the name of the first school you attended?</option>
            </select>
            <label for="security-a2" class="sr-only">Answer 2</label>
            <input type="text" id="security-a2" name="security_a2" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Your Answer">
        </div>

         <!-- Question 3 -->
        <div class="space-y-2">
            <label for="security-q3" class="block text-sm font-medium text-gray-700">Question 3</label>
            <select id="security-q3" name="security_q3" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                <option>Select a question...</option>
                <option>What was your favorite high school subject?</option>
                <option>What is the name of a college you applied to but didn't attend?</option>
                <option>Where were you when you first heard about a major historical event?</option>
                <option>What is your favorite musical instrument?</option>
            </select>
            <label for="security-a3" class="sr-only">Answer 3</label>
            <input type="text" id="security-a3" name="security_a3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Your Answer">
        </div>

        <!-- Action Buttons -->
         <div class="flex justify-end pt-4 border-t mt-6">
            <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-3">
                Cancel
            </button>
            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Save Questions
            </button>
        </div>
    </form>
</div>

Social Media & Linked Accounts

<!-- Social Media & Linked Accounts Form -->
<div class="max-w-lg bg-white rounded-lg shadow-md p-6 border border-gray-200">
  <h3 class="text-lg font-semibold text-gray-800 mb-4">Connect Your Accounts</h3>
  <p class="text-sm text-gray-600 mb-6">Link your social media profiles to share or connect.</p>
  <form class="space-y-5">
      <!-- Twitter -->
      <div class="flex items-center space-x-3">
         <svg class="w-6 h-6 text-blue-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6c-.77.35-1.6.58-2.46.67.9-.54 1.58-1.4 1.9-2.37-.84.5-1.77.86-2.77 1.06-.79-.85-1.92-1.38-3.15-1.38-2.38 0-4.3 1.93-4.3 4.3 0 .34.04.67.11.98-3.57-.18-6.74-1.89-8.86-4.49-.37.63-.58 1.37-.58 2.15 0 1.49.76 2.8 1.92 3.57-.7-.02-1.36-.21-1.94-.53v.05c0 2.08 1.48 3.82 3.44 4.21-.36.1-.74.15-1.13.15-.28 0-.55-.03-.81-.08.55 1.7 2.14 2.94 4.03 2.97-1.47 1.15-3.32 1.84-5.33 1.84-.35 0-.69-.02-1.03-.06 1.9 1.22 4.16 1.93 6.56 1.93 7.88 0 12.19-6.53 12.19-12.19 0-.19 0-.37-.01-.55.84-.6 1.56-1.36 2.14-2.22z"/></svg>
          <label for="social-twitter" class="sr-only">Twitter Profile URL</label>
          <input type="url" id="social-twitter" name="social_twitter" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="https://twitter.com/username">
      </div>
       <!-- LinkedIn -->
      <div class="flex items-center space-x-3">
         <svg class="w-6 h-6 text-blue-700" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
         <label for="social-linkedin" class="sr-only">LinkedIn Profile URL</label>
         <input type="url" id="social-linkedin" name="social_linkedin" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="https://linkedin.com/in/username">
      </div>
      <!-- GitHub -->
      <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 text-gray-800" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.5.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.036 1.531 1.036.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.379.201 2.397.098 2.65.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/></svg>
         <label for="social-github" class="sr-only">GitHub Profile URL</label>
         <input type="url" id="social-github" name="social_github" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="https://github.com/username">
      </div>
       <!-- Website -->
      <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
         <label for="social-website" class="sr-only">Personal Website URL</label>
         <input type="url" id="social-website" name="social_website" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="https://yourwebsite.com">
      </div>

       <!-- Action Buttons -->
       <div class="flex justify-end pt-4 border-t mt-6">
          <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-3">
              Cancel
          </button>
          <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
              Save Links
          </button>
      </div>
  </form>
</div>

Language and Region Preferences

Language & Region

Choose your preferred language and region for your experience.

Language

Region / Country

This helps us customize content and formats for your location.

<!-- Language and Region Preferences Form -->
<div class="max-w-lg bg-white rounded-lg shadow-md p-6 border border-gray-200">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Language & Region</h3>
    <p class="text-sm text-gray-600 mb-6">Choose your preferred language and region for your experience.</p>
    <form class="space-y-6">
        <!-- Language Selection -->
        <div>
            <label for="language" class="block text-sm font-medium text-gray-700">Language</label>
            <select id="language" name="language" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                <option value="en-US">English (United States)</option>
                <option value="en-GB">English (United Kingdom)</option>
                <option value="es-ES">Español (España)</option>
                <option value="es-MX">Español (México)</option>
                <option value="fr-FR">Français (France)</option>
                <option value="de-DE">Deutsch (Deutschland)</option>
                <option value="ja-JP">日本語 (日本)</option>
                <!-- Add more languages as needed -->
            </select>
        </div>

         <!-- Region Selection -->
        <div>
            <label for="region" class="block text-sm font-medium text-gray-700">Region / Country</label>
            <select id="region" name="region" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                <option value="US">United States</option>
                <option value="GB">United Kingdom</option>
                <option value="CA">Canada</option>
                <option value="AU">Australia</option>
                <option value="ES">Spain</option>
                <option value="MX">Mexico</option>
                <option value="FR">France</option>
                <option value="DE">Germany</option>
                <option value="JP">Japan</option>
                 <!-- Add more countries as needed -->
            </select>
             <p class="mt-2 text-xs text-gray-500">This helps us customize content and formats for your location.</p>
        </div>

        <!-- Action Buttons -->
         <div class="flex justify-end pt-4 border-t mt-6">
            <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-3">
                Cancel
            </button>
            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Save Preferences
            </button>
        </div>
    </form>
</div>

Timezone Selection

Timezone

Select your current timezone to ensure dates and times are displayed correctly.

Timezone

<!-- Timezone Selection Form -->
<div class="max-w-lg bg-white rounded-lg shadow-md p-6 border border-gray-200">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Timezone</h3>
    <p class="text-sm text-gray-600 mb-6">Select your current timezone to ensure dates and times are displayed correctly.</p>
    <form class="space-y-6">
        <!-- Timezone Selection -->
        <div>
            <label for="timezone" class="block text-sm font-medium text-gray-700">Timezone</label>
            <select id="timezone" name="timezone" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
              <option value="Etc/GMT+12">(GMT-12:00) International Date Line West</option>
              <option value="Pacific/Midway">(GMT-11:00) Midway Island, Samoa</option>
              <option value="Pacific/Honolulu">(GMT-10:00) Hawaii</option>
              <option value="US/Alaska">(GMT-09:00) Alaska</option>
              <option value="America/Los_Angeles">(GMT-08:00) Pacific Time (US & Canada)</option>
              <option value="America/Tijuana">(GMT-08:00) Tijuana, Baja California</option>
              <option value="US/Arizona">(GMT-07:00) Arizona</option>
              <option value="America/Chihuahua">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
              <option value="US/Mountain">(GMT-07:00) Mountain Time (US & Canada)</option>
              <option value="America/Managua">(GMT-06:00) Central America</option>
              <option value="US/Central">(GMT-06:00) Central Time (US & Canada)</option>
              <option value="America/Mexico_City">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
              <option value="Canada/Saskatchewan">(GMT-06:00) Saskatchewan</option>
              <option value="America/Bogota">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
              <option value="US/Eastern">(GMT-05:00) Eastern Time (US & Canada)</option>
              <option value="US/East-Indiana">(GMT-05:00) Indiana (East)</option>
              <option value="Canada/Atlantic">(GMT-04:00) Atlantic Time (Canada)</option>
              <option value="America/Caracas">(GMT-04:00) Caracas, La Paz</option>
              <option value="America/Manaus">(GMT-04:00) Manaus</option>
              <option value="America/Santiago">(GMT-04:00) Santiago</option>
              <option value="Canada/Newfoundland">(GMT-03:30) Newfoundland</option>
              <option value="America/Sao_Paulo">(GMT-03:00) Brasilia</option>
              <option value="America/Argentina/Buenos_Aires">(GMT-03:00) Buenos Aires, Georgetown</option>
              <option value="America/Godthab">(GMT-03:00) Greenland</option>
              <option value="America/Montevideo">(GMT-03:00) Montevideo</option>
              <option value="Atlantic/South_Georgia">(GMT-02:00) Mid-Atlantic</option>
              <option value="Atlantic/Azores">(GMT-01:00) Azores</option>
              <option value="Atlantic/Cape_Verde">(GMT-01:00) Cape Verde Is.</option>
              <option value="Africa/Casablanca">(GMT+00:00) Casablanca, Monrovia, Reykjavik</option>
              <option value="Etc/Greenwich" selected>(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London</option>
              <option value="Europe/Amsterdam">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
              <option value="Europe/Belgrade">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
              <option value="Europe/Brussels">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris</option>
              <option value="Europe/Sarajevo">(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb</option>
              <option value="Africa/Lagos">(GMT+01:00) West Central Africa</option>
              <option value="Asia/Amman">(GMT+02:00) Amman</option>
              <option value="Europe/Athens">(GMT+02:00) Athens, Bucharest, Istanbul</option>
              <option value="Asia/Beirut">(GMT+02:00) Beirut</option>
              <option value="Africa/Cairo">(GMT+02:00) Cairo</option>
              <option value="Africa/Harare">(GMT+02:00) Harare, Pretoria</option>
              <option value="Europe/Helsinki">(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius</option>
              <option value="Asia/Jerusalem">(GMT+02:00) Jerusalem</option>
              <option value="Europe/Minsk">(GMT+02:00) Minsk</option>
              <option value="Africa/Windhoek">(GMT+02:00) Windhoek</option>
              <option value="Asia/Kuwait">(GMT+03:00) Kuwait, Riyadh, Baghdad</option>
              <option value="Europe/Moscow">(GMT+03:00) Moscow, St. Petersburg, Volgograd</option>
              <option value="Africa/Nairobi">(GMT+03:00) Nairobi</option>
              <option value="Asia/Tbilisi">(GMT+03:00) Tbilisi</option>
              <option value="Asia/Tehran">(GMT+03:30) Tehran</option>
              <option value="Asia/Muscat">(GMT+04:00) Abu Dhabi, Muscat</option>
              <option value="Asia/Baku">(GMT+04:00) Baku</option>
              <option value="Asia/Yerevan">(GMT+04:00) Yerevan</option>
              <option value="Asia/Kabul">(GMT+04:30) Kabul</option>
              <option value="Asia/Yekaterinburg">(GMT+05:00) Yekaterinburg</option>
              <option value="Asia/Karachi">(GMT+05:00) Islamabad, Karachi, Tashkent</option>
              <option value="Asia/Calcutta">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
              <option value="Asia/Katmandu">(GMT+05:45) Kathmandu</option>
              <option value="Asia/Almaty">(GMT+06:00) Almaty, Novosibirsk</option>
              <option value="Asia/Dhaka">(GMT+06:00) Astana, Dhaka</option>
              <option value="Asia/Rangoon">(GMT+06:30) Yangon (Rangoon)</option>
              <option value="Asia/Bangkok">(GMT+07:00) Bangkok, Hanoi, Jakarta</option>
              <option value="Asia/Krasnoyarsk">(GMT+07:00) Krasnoyarsk</option>
              <option value="Asia/Hong_Kong">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
              <option value="Asia/Kuala_Lumpur">(GMT+08:00) Kuala Lumpur, Singapore</option>
              <option value="Asia/Irkutsk">(GMT+08:00) Irkutsk, Ulaan Bataar</option>
              <option value="Asia/Perth">(GMT+08:00) Perth</option>
              <option value="Asia/Taipei">(GMT+08:00) Taipei</option>
              <option value="Asia/Tokyo">(GMT+09:00) Osaka, Sapporo, Tokyo</option>
              <option value="Asia/Seoul">(GMT+09:00) Seoul</option>
              <option value="Asia/Yakutsk">(GMT+09:00) Yakutsk</option>
              <option value="Australia/Adelaide">(GMT+09:30) Adelaide</option>
              <option value="Australia/Darwin">(GMT+09:30) Darwin</option>
              <option value="Australia/Brisbane">(GMT+10:00) Brisbane</option>
              <option value="Australia/Canberra">(GMT+10:00) Canberra, Melbourne, Sydney</option>
              <option value="Australia/Hobart">(GMT+10:00) Hobart</option>
              <option value="Pacific/Guam">(GMT+10:00) Guam, Port Moresby</option>
              <option value="Asia/Vladivostok">(GMT+10:00) Vladivostok</option>
              <option value="Asia/Magadan">(GMT+11:00) Magadan, Solomon Is., New Caledonia</option>
              <option value="Pacific/Auckland">(GMT+12:00) Auckland, Wellington</option>
              <option value="Pacific/Fiji">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</option>
              <option value="Pacific/Tongatapu">(GMT+13:00) Nuku'alofa</option>
             </select>
        </div>

        <!-- Action Buttons -->
         <div class="flex justify-end pt-4 border-t mt-6">
            <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-3">
                Cancel
            </button>
            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Save Timezone
            </button>
        </div>
    </form>
</div>

Notification Preferences

Notifications

Choose how you want to be notified.

By Email

Comments

Get notified when someones posts a comment on a posting.

Candidates

Get notified when a candidate applies for a job.

Offers & Promotions

Get notified when a candidate accepts or rejects an offer.

Newsletter

Receive our weekly newsletter with tips and updates.

Push Notifications

These are delivered via SMS to your mobile phone.

Everything

Same as email

No push notifications

<!-- Notification Preferences Form -->
<div class="max-w-lg bg-white rounded-lg shadow-md p-6 border border-gray-200">
   <form>
       <div class="space-y-8 divide-y divide-gray-200">
           <div>
               <h3 class="text-lg font-semibold text-gray-800">Notifications</h3>
               <p class="mt-1 text-sm text-gray-600">Choose how you want to be notified.</p>
           </div>

           <fieldset class="pt-6">
               <legend class="text-base font-medium text-gray-900">By Email</legend>
               <div class="mt-4 space-y-4">
                   <div class="relative flex items-start">
                       <div class="flex items-center h-5">
                           <input id="comments" name="comments" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                       </div>
                       <div class="ml-3 text-sm">
                           <label for="comments" class="font-medium text-gray-700">Comments</label>
                           <p class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
                       </div>
                   </div>
                   <div class="relative flex items-start">
                       <div class="flex items-center h-5">
                           <input id="candidates" name="candidates" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                       </div>
                       <div class="ml-3 text-sm">
                           <label for="candidates" class="font-medium text-gray-700">Candidates</label>
                           <p class="text-gray-500">Get notified when a candidate applies for a job.</p>
                       </div>
                   </div>
                   <div class="relative flex items-start">
                       <div class="flex items-center h-5">
                           <input id="offers" name="offers" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
                       </div>
                       <div class="ml-3 text-sm">
                           <label for="offers" class="font-medium text-gray-700">Offers & Promotions</label>
                           <p class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
                       </div>
                   </div>
                   <div class="relative flex items-start">
                       <div class="flex items-center h-5">
                           <input id="newsletter" name="newsletter" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                       </div>
                       <div class="ml-3 text-sm">
                           <label for="newsletter" class="font-medium text-gray-700">Newsletter</label>
                           <p class="text-gray-500">Receive our weekly newsletter with tips and updates.</p>
                       </div>
                   </div>
               </div>
           </fieldset>

           <fieldset class="pt-6">
               <div>
                   <legend class="text-base font-medium text-gray-900">Push Notifications</legend>
                   <p class="text-sm text-gray-500">These are delivered via SMS to your mobile phone.</p>
               </div>
               <div class="mt-4 space-y-4">
                   <div class="flex items-center">
                       <input id="push-everything" name="push_notifications" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
                       <label for="push-everything" class="ml-3 block text-sm font-medium text-gray-700">Everything</label>
                   </div>
                   <div class="flex items-center">
                       <input id="push-email" name="push_notifications" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" checked>
                       <label for="push-email" class="ml-3 block text-sm font-medium text-gray-700">Same as email</label>
                   </div>
                   <div class="flex items-center">
                       <input id="push-nothing" name="push_notifications" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
                       <label for="push-nothing" class="ml-3 block text-sm font-medium text-gray-700">No push notifications</label>
                   </div>
               </div>
           </fieldset>
       </div>

        <!-- Action Buttons -->
        <div class="pt-8 flex justify-end">
            <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-3">
                Cancel
            </button>
            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Save Notifications
            </button>
        </div>
   </form>
</div>

Two-Factor Authentication (2FA) Setup

Two-Factor Authentication

Add an extra layer of security to your account.

Select Method

Authenticator App

SMS Text Message

Setup Authenticator App

Scan the QR code with your authenticator app (e.g., Google Authenticator, Authy).

Verification Code

2FA Currently Active

<form class="space-y-6">
    <div>
        <h3 class="text-lg font-medium leading-6 text-gray-900">Two-Factor Authentication</h3>
        <p class="mt-1 text-sm text-gray-500">Add an extra layer of security to your account.</p>
    </div>

    <fieldset>
        <legend class="text-base font-medium text-gray-900">Select Method</legend>
        <div class="mt-4 space-y-4">
            <div class="flex items-center">
                <input id="2fa-app" name="2fa-method" type="radio" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                <label for="2fa-app" class="ml-3 block text-sm font-medium text-gray-700">Authenticator App</label>
            </div>
            <div class="flex items-center">
                <input id="2fa-sms" name="2fa-method" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                <label for="2fa-sms" class="ml-3 block text-sm font-medium text-gray-700">SMS Text Message</label>
            </div>
        </div>
    </fieldset>

    <!-- Authenticator App Section (Example) -->
    <div class="border-t border-gray-200 pt-6">
        <h4 class="text-md font-medium text-gray-900">Setup Authenticator App</h4>
        <p class="mt-1 text-sm text-gray-500">Scan the QR code with your authenticator app (e.g., Google Authenticator, Authy).</p>
        <div class="mt-4 flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img src="https://picsum.photos/160/160?random=1" alt="QR Code Placeholder" class="w-40 h-40 border border-gray-300 p-1">
            <div>
                <label for="2fa-code" class="block text-sm font-medium text-gray-700">Verification Code</label>
                <input type="text" name="2fa-code" id="2fa-code" autocomplete="one-time-code" placeholder="Enter 6-digit code" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                <button type="submit" class="mt-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Enable 2FA
                </button>
            </div>
        </div>
    </div>

     <div class="pt-5">
        <div class="flex justify-end items-center">
             <span class="text-sm text-green-600 mr-3">2FA Currently Active</span>
             <button type="button" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                Disable 2FA
            </button>
        </div>
    </div>
</form>

Security Questions Setup/Edit

Security Questions

Set up security questions for account recovery.

Question 1

Question 2

<form class="space-y-6">
    <div>
        <h3 class="text-lg font-medium leading-6 text-gray-900">Security Questions</h3>
        <p class="mt-1 text-sm text-gray-500">Set up security questions for account recovery.</p>
    </div>

    <!-- Question 1 -->
    <div class="space-y-2">
        <label for="security-q1" class="block text-sm font-medium text-gray-700">Question 1</label>
        <select id="security-q1" name="security-q1" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
            <option>Select a question...</option>
            <option>What was your first pet's name?</option>
            <option>What city were you born in?</option>
            <option>What is your mother's maiden name?</option>
        </select>
        <label for="security-a1" class="sr-only">Answer 1</label>
        <input type="text" name="security-a1" id="security-a1" placeholder="Your answer" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
    </div>

    <!-- Question 2 -->
    <div class="space-y-2 pt-4 border-t border-gray-200">
        <label for="security-q2" class="block text-sm font-medium text-gray-700">Question 2</label>
        <select id="security-q2" name="security-q2" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
            <option>Select a question...</option>
            <option>What was the model of your first car?</option>
            <option>What is the name of your favorite teacher?</option>
            <option>In what city did your parents meet?</option>
        </select>
        <label for="security-a2" class="sr-only">Answer 2</label>
        <input type="text" name="security-a2" id="security-a2" placeholder="Your answer" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
    </div>

    <div class="pt-5 border-t border-gray-200">
        <div class="flex justify-end">
            <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Cancel
            </button>
            <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Save Questions
            </button>
        </div>
    </div>
</form>

Social Media & Linked Accounts

<div class="space-y-6">
    <div>
       <h3 class="text-lg font-medium leading-6 text-gray-900">Linked Accounts</h3>
       <p class="mt-1 text-sm text-gray-500">Connect your social media accounts for easier login or profile integration.</p>
   </div>

   <ul role="list" class="divide-y divide-gray-200">
       <!-- Connected Account Example -->
       <li class="py-4 flex items-center justify-between">
           <div class="flex items-center space-x-3">
                <!-- Placeholder Icon / Your SVG or Img -->
                <svg class="h-6 w-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M22.539 8.249a9.658 9.658 0 00-.411-2.927 10.132 10.132 0 00-1.019-2.488 10.08 10.08 0 00-1.77-1.998 10.078 10.078 0 00-2.488-1.019A9.658 9.658 0 0013.924.41 10.19 10.19 0 0012 .001a10.19 10.19 0 00-1.924.409 9.658 9.658 0 00-2.927.411 10.132 10.132 0 00-2.488 1.019 10.08 10.08 0 00-1.998 1.77A10.078 10.078 0 001.019 6.1 9.658 9.658 0 00.41 8.249 10.19 10.19 0 00.001 10.172v.01a10.19 10.19 0 00.409 1.924 9.658 9.658 0 00.411 2.927 10.132 10.132 0 001.019 2.488 10.08 10.08 0 001.77 1.998 10.078 10.078 0 002.488 1.019 9.658 9.658 0 002.927.411A10.19 10.19 0 0010.172 24h.01a10.19 10.19 0 001.924-.409 9.658 9.658 0 002.927-.411 10.132 10.132 0 002.488-1.019 10.08 10.08 0 001.998-1.77 10.078 10.078 0 001.019-2.488 9.658 9.658 0 00.41-2.927A10.19 10.19 0 0024 11.828h-.01a10.19 10.19 0 00-.409-1.924zM8.173 18.241a1.35 1.35 0 01-1.35 1.35h-2.26a1.35 1.35 0 01-1.35-1.35V9.758a1.35 1.35 0 011.35-1.35h2.26a1.35 1.35 0 011.35 1.35v8.483zm-1.13-9.842a1.65 1.65 0 110-3.301 1.65 1.65 0 010 3.301zm12.596 9.842a1.35 1.35 0 01-1.35 1.35h-2.26a1.35 1.35 0 01-1.35-1.35v-4.11c0-.99-.345-1.658-1.227-1.658-.67 0-1.06.45-1.237.888-.064.15-.08.36-.08.57v4.31a1.35 1.35 0 01-1.35 1.35H9.758a1.35 1.35 0 01-1.35-1.35V9.758a1.35 1.35 0 011.35-1.35h2.26a1.35 1.35 0 011.35 1.35v.827c.345-.532.93-1.287 2.058-1.287 2.25 0 3.94 1.47 3.94 4.63v4.97z"/> </svg>
               <span class="text-sm font-medium text-gray-900">LinkedIn</span>
           </div>
           <button type="button" class="text-sm font-medium text-red-600 hover:text-red-800">Disconnect</button>
       </li>

       <!-- Not Connected Example -->
       <li class="py-4 flex items-center justify-between">
            <div class="flex items-center space-x-3">
               <!-- Placeholder Icon / Your SVG or Img -->
               <svg class="h-6 w-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"/> </svg>
               <span class="text-sm font-medium text-gray-500">Facebook</span>
           </div>
           <button type="button" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
               Connect
           </button>
       </li>
        <li class="py-4 flex items-center justify-between">
             <div class="flex items-center space-x-3">
                <!-- Placeholder Icon / Your SVG or Img -->
                <svg class="h-6 w-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm7.94 5.843c-.29.13-.6.218-.92.252.334-.2.59-.518.71-.886-.313.185-.66.32-1.026.392-.295-.315-.716-.512-1.175-.512-.888 0-1.608.72-1.608 1.608 0 .126.014.248.042.368-1.336-.067-2.52-1.273-3.314-2.693-.138.237-.217.513-.217.804 0 .558.284 1.05.716 1.338-.264-.008-.512-.08-.73-.202v.02c0 .78.555 1.43 1.293 1.578-.135.037-.277.056-.424.056-.104 0-.205-.01-.304-.028.204.64.796 1.106 1.498 1.12-.55.43-1.245.688-2 .688-.13 0-.258-.008-.384-.023.71.456 1.555.722 2.46.722 2.95 0 4.566-2.444 4.566-4.566 0-.07-.002-.14-.005-.208.314-.227.586-.51.8-.82z"/></svg>
                <span class="text-sm font-medium text-gray-500">Twitter / X</span>
            </div>
            <button type="button" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Connect
            </button>
        </li>
         <li class="py-4 flex items-center justify-between">
             <div class="flex items-center space-x-3">
                <!-- Placeholder Icon / Your SVG or Img -->
                <svg class="h-6 w-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.82c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.858 0 1.34-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" /></svg>
                <span class="text-sm font-medium text-gray-500">GitHub</span>
            </div>
            <button type="button" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Connect
            </button>
        </li>
   </ul>
</div>

Language and Region Preferences

Language & Region

Choose your preferred language and region settings.

Language

Country / Region

<form class="space-y-6">
    <div>
        <h3 class="text-lg font-medium leading-6 text-gray-900">Language & Region</h3>
        <p class="mt-1 text-sm text-gray-500">Choose your preferred language and region settings.</p>
    </div>

    <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
        <div class="sm:col-span-3">
            <label for="language" class="block text-sm font-medium text-gray-700">Language</label>
            <select id="language" name="language" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                <option selected>English</option>
                <option>Español</option>
                <option>Français</option>
                <option>Deutsch</option>
            </select>
        </div>

        <div class="sm:col-span-3">
            <label for="country" class="block text-sm font-medium text-gray-700">Country / Region</label>
            <select id="country" name="country" autocomplete="country-name" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                <option>United States</option>
                <option>Canada</option>
                <option>Mexico</option>
                <option>United Kingdom</option>
                <option>Germany</option>
                <option>France</option>
            </select>
        </div>
    </div>

    <div class="pt-5 border-t border-gray-200">
        <div class="flex justify-end">
            <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Cancel
            </button>
            <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Save Preferences
            </button>
        </div>
    </div>
</form>

Timezone Selection

Timezone

Select your current timezone.

Timezone

<form class="space-y-6">
     <div>
        <h3 class="text-lg font-medium leading-6 text-gray-900">Timezone</h3>
        <p class="mt-1 text-sm text-gray-500">Select your current timezone.</p>
    </div>

    <div>
        <label for="timezone" class="block text-sm font-medium text-gray-700">Timezone</label>
        <select id="timezone" name="timezone" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
            <option>(GMT-12:00) International Date Line West</option>
            <option>(GMT-11:00) Midway Island, Samoa</option>
            <option>(GMT-10:00) Hawaii</option>
            <option>(GMT-09:00) Alaska</option>
            <option>(GMT-08:00) Pacific Time (US & Canada)</option>
            <option>(GMT-07:00) Mountain Time (US & Canada)</option>
            <option selected>(GMT-06:00) Central Time (US & Canada)</option>
            <option>(GMT-05:00) Eastern Time (US & Canada)</option>
            <option>(GMT-04:00) Atlantic Time (Canada)</option>
            <option>(GMT-03:00) Buenos Aires, Georgetown</option>
            <option>(GMT-02:00) Mid-Atlantic</option>
            <option>(GMT-01:00) Azores</option>
            <option>(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London</option>
            <option>(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
            <option>(GMT+02:00) Athens, Bucharest, Istanbul</option>
            <!-- Add more timezones as needed -->
        </select>
    </div>

    <div class="pt-5 border-t border-gray-200">
        <div class="flex justify-end">
            <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Cancel
            </button>
            <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Save Timezone
            </button>
        </div>
    </div>
</form>

Notification Preferences

Notifications

Choose how you want to be notified.

By Email

Comments

Get notified when someones posts a comment on a posting.

New Followers

Get notified when a user follows you.

Promotions & Offers

Get notified about special promotions and offers from WPDean.

Push Notifications

These are delivered via SMS to your mobile phone.

Everything

Same as email

No push notifications

<form class="space-y-8 divide-y divide-gray-200">
    <div class="space-y-6">
        <div>
            <h3 class="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
            <p class="mt-1 text-sm text-gray-500">Choose how you want to be notified.</p>
        </div>
        <fieldset>
            <legend class="text-base font-medium text-gray-900">By Email</legend>
            <div class="mt-4 space-y-4">
                <div class="relative flex items-start">
                    <div class="flex items-center h-5">
                        <input id="comments" name="comments" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="comments" class="font-medium text-gray-700">Comments</label>
                        <p class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
                    </div>
                </div>
                <div class="relative flex items-start">
                    <div class="flex items-center h-5">
                        <input id="candidates" name="candidates" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="candidates" class="font-medium text-gray-700">New Followers</label>
                        <p class="text-gray-500">Get notified when a user follows you.</p>
                    </div>
                </div>
                <div class="relative flex items-start">
                    <div class="flex items-center h-5">
                        <input id="offers" name="offers" type="checkbox" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="offers" class="font-medium text-gray-700">Promotions & Offers</label>
                        <p class="text-gray-500">Get notified about special promotions and offers from <span class="text-blue-600 font-bold">WPDean</span>.</p>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset class="pt-6">
            <legend class="text-base font-medium text-gray-900">Push Notifications</legend>
            <p class="text-sm text-gray-500">These are delivered via SMS to your mobile phone.</p>
            <div class="mt-4 space-y-4">
                <div class="flex items-center">
                    <input id="push-everything" name="push-notifications" type="radio" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                    <label for="push-everything" class="ml-3 block text-sm font-medium text-gray-700"> Everything </label>
                </div>
                <div class="flex items-center">
                    <input id="push-email" name="push-notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                    <label for="push-email" class="ml-3 block text-sm font-medium text-gray-700"> Same as email </label>
                </div>
                <div class="flex items-center">
                    <input id="push-nothing" name="push-notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                    <label for="push-nothing" class="ml-3 block text-sm font-medium text-gray-700"> No push notifications </label>
                </div>
            </div>
        </fieldset>
    </div>

    <div class="pt-5">
        <div class="flex justify-end">
            <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Cancel
            </button>
            <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Save Notifications
            </button>
        </div>
    </div>
</form>

FAQ on Tailwind CSS Profile Forms

How do I create a responsive profile form with Tailwind CSS?

Create responsive profile forms by using Tailwind's built-in responsive utility classes. Structure your form layout with grid or flex components, then apply classes like md:grid-cols-2 for medium screens. Your form elements will automatically adjust to different screen sizes without custom CSS. This approach streamlines responsive form fields development.

What are the best practices for styling input fields in Tailwind?

Focus on consistency and accessibility. Use uniform input field styling across your profile UI components. Apply focus:ring for clear focus states, maintain sufficient text contrast, and ensure proper spacing between form controls. Define a cohesive color scheme using Tailwind's color palette to enhance your web form design.

Can I create custom form components with Tailwind CSS?

Yes. Tailwind's utility-first approach excels at custom form component library creation. Build reusable components by grouping utilities with @apply in your CSS or creating component classes. This approach offers flexibility for profile card templates while maintaining design consistency across your application interface.

How do I handle form validation in Tailwind profile forms?

Implement validation using JavaScript frameworks alongside Tailwind's state classes. Use invalid: and valid: variants to style fields based on validation status. This ensures users receive clear feedback while maintaining your form validation design aesthetic. Consider adding helper text for additional guidance.

What's the easiest way to create a profile picture upload component?

Build a profile picture upload component using Tailwind's positioning and sizing utilities. Create a container with relative positioning, add an input with type="file", and style with appropriate border-radius for circular images. This approach simplifies profile picture upload functionality in your user profile template.

How do I make my Tailwind profile forms accessible?

Prioritize form accessibility by adding proper labels with for attributes, including descriptive aria- attributes, ensuring keyboard navigation works properly, and maintaining sufficient color contrast. Test with screen readers to verify all form elements are properly announced to users with disabilities.

Can Tailwind CSS profile forms integrate with JavaScript frameworks?

Absolutely. Tailwind works seamlessly with React, Vue, and Angular javascript frameworks. The utility classes integrate perfectly with component-based architecture, allowing you to build dynamic profile editor interfaces that maintain consistent styling while leveraging framework features for form state management.

What's the best layout structure for complex profile forms?

Organize complex forms using a combination of grid and flex layouts. Group related profile information fields into logical sections using <fieldset>. Consider a multi-column layout for desktop and single-column for mobile. This creates clean form grid layouts that improve user experience and completion rates.

How can I create a dark mode version of my profile form?

Implement dark mode using Tailwind's built-in dark mode feature. Apply dark: variant prefixes to color classes for backgrounds, text, and borders. This creates a seamless transition between light and dark themes for your profile page design without duplicate code, enhancing user preferences form options.

What are efficient ways to style form buttons in Tailwind?

Create consistent button styles using Tailwind's padding, color, border, and hover state utilities. Group these into reusable classes for primary, secondary and danger actions. This approach ensures your authentication forms maintain visual hierarchy while keeping your frontend form development efficient and maintainable.