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.9k

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 CSS Radio Button Cards

Author:
Prashant

3 years ago

12.7k
Contact Form

Author:
Sophia Baker

3 years ago

10.5k
Forgot password form

Author:
ariaw

2 months ago

201
Contact us page template
full page fancy contact us page

Author:
Geoffrey Callaghan

2 years ago

7.6k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

9 months ago

1.2k
Contact me form
contact me form

Author:
Geoffrey Callaghan

2 years ago

7.3k
Upload file input field

Author:
Gopi Yadav

3 years ago

14.9k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

1 year ago

1.6k
Responsive login form
form with social login buttons

Author:
Anonymous

2 weeks ago

39
Contact us form template with fabform

Author:
Ho O

1 year ago

1.1k
login
Dark mode login

Author:
Hacker Development

8 months ago

1.2k
form3

Author:
ABDO-SY

10 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components