Home
seth dridi
update user

update user

it is the layout for creating an event

This tailwind example is contributed by seth dridi, on 20-Aug-2024. Component is made with Tailwind CSS v3. It is responsive.

Form

Author seth dridi

666

Fork Fullscreen

<div class="container mx-auto p-4">
  
  <h1 class="text-3xl font-bold text-[black] mb-6">Update User</h1>

<div class="p-2 grid grid-cols-1 md:grid-cols-2 gap-6">
      
      <div>
        <textarea id="bio" name="bio" rows="3" placeholder="User Biography" class="block w-full h-48 rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;"></textarea>
      </div>

<div>
        <label for="avatar" class="block w-full h-48 border-2 border-dashed border-gray-300 rounded-md cursor-pointer flex flex-col items-center justify-center bg-[#f6f6f6] hover:bg-gray-50">
          <div class="text-center">
            <div class="mb-2">
              <button type="button" class="bg-[#8c0327] hover:bg-[#6b0220] text-white rounded-full py-2 px-4">Select from the computer</button>
            </div>
            <p class="text-gray-500">or drag photo here</p>
            <p class="text-gray-500 text-sm mt-1">PNG, JPG, SVG</p>
          </div>
        </label>
        <input id="avatar" name="avatar" type="file" accept="image/*" class="sr-only">
      </div>
    </div>

<div class="p-2 grid grid-cols-1 md:grid-cols-2 gap-6">
      
      <div>
        <input type="text" id="firstName" name="firstName" placeholder="First name" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
      </div>

<div>
        <input type="text" id="lastName" name="lastName" placeholder="Last name" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
      </div>
    </div>

<div class="p-2">
      <input type="email" id="email" name="email" placeholder="Email" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
    </div>

<div class="p-2">
      <input type="password" id="currentPassword" name="currentPassword" placeholder="Current password" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
    </div>
    
    
    <div class="p-2 grid grid-cols-1 md:grid-cols-2 gap-6">
      
      <div>
        <input type="password" id="newPassword" name="newPassword" placeholder="New password" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
      </div>

<div>
        <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirmation password" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
      </div>
    </div>

<div class="col-span-full mt-6 p-2">
      <button type="submit" class="block w-full bg-[#8c0327] hover:bg-[#6b0220] text-white font-bold py-3 px-4 rounded-full">
        Update user
      </button>
    </div>
  </form>
</div>

Related Examples

Contact Form

Author:
Sophia Baker

1 year ago

9.1k
Login Form

Author:
Amit Pachange

2 years ago

10.3k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

5 months ago

939
Simple login form

Author:
Freja Jensen

1 year ago

9.4k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

9 months ago

2.6k
Contact us section
Minimal contact us form

Author:
Leon Bachmann

1 year ago

10.3k
Login template

Author:
Gabriel Urbano

10 months ago

4.2k
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

3 weeks ago

463
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

5 months ago

611
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

5 months ago

785
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

8.9k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

2 years ago

17.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent