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

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

Credit / Debit card payment information form

Author:
Santos78

2 years ago

18.9k
Profile Form
Stunning Profile and Cover Image Fields

Author:
Samuel Abera

1 year ago

4k
Forgot password form
Useful form for sending password reset link

Author:
Anonymous

5 months ago

780
progress-bar with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

11 months ago

1.4k
Glassmorphism form

Author:
Geoffrey Callaghan

1 year ago

6k
Login form

Author:
Rajesh Maheshwari

1 month ago

370
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

2 months ago

207
Login template

Author:
Gabriel Urbano

1 year ago

5.2k
Otp form
SImple opt form with resend and verify button

Author:
Rafferty Kim

1 year ago

10.2k
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:
Anonymous

10 months ago

2.4k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

1 month ago

304
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

3.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components