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

1.8k

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

tailwind contact form template
tailwind contact form template

Author:
Ti To

1 year ago

5.2k
Input output form

Author:
Prajwal Hallale

2 years ago

7.8k
Simple contact us form

Author:
Lukas Müller

2 years ago

11.7k
Checkout form

Author:
Sienna

2 years ago

13.7k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.2k
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

2 years ago

8.1k
Sign up form

Author:
Rajesh Maheshwari

7 months ago

795
Confirm OTP Form
can be used as a reset password form

Author:
Santos78

2 years ago

10.6k
Contact us section
Minimal contact us form

Author:
Geoffrey Callaghan

1 year ago

5.5k
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

11.8k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

5 months ago

581
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components