Form for editing items

This tailwind example is contributed by Sophia Baker, on 02-Feb-2023. Component is made with Tailwind v3.4. It is responsive.

Form

Author Sophia Baker

Tailwind v3.4 18.8k 22

Fork Fullscreen

<div class="flex items-start justify-between p-5 border-b rounded-t">
        <h3 class="text-xl font-semibold">
            Edit product
        </h3>
        <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" data-modal-toggle="product-modal">
           <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>

<div class="p-6 space-y-6">
        <form action="#">
            <div class="grid grid-cols-6 gap-6">
                <div class="col-span-6 sm:col-span-3">
                    <label for="product-name" class="text-sm font-medium text-gray-900 block mb-2">Product Name</label>
                    <input type="text" name="product-name" id="product-name" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5" placeholder="Apple Imac 27”" required="">
                </div>
                <div class="col-span-6 sm:col-span-3">
                    <label for="category" class="text-sm font-medium text-gray-900 block mb-2">Category</label>
                    <input type="text" name="category" id="category" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5" placeholder="Electronics" required="">
                </div>
                <div class="col-span-6 sm:col-span-3">
                    <label for="brand" class="text-sm font-medium text-gray-900 block mb-2">Brand</label>
                    <input type="text" name="brand" id="brand" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5" placeholder="Apple" required="">
                </div>
                <div class="col-span-6 sm:col-span-3">
                    <label for="price" class="text-sm font-medium text-gray-900 block mb-2">Price</label>
                    <input type="number" name="price" id="price" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5" placeholder="$2300" required="">
                </div>
                <div class="col-span-full">
                    <label for="product-details" class="text-sm font-medium text-gray-900 block mb-2">Product Details</label>
                    <textarea id="product-details" rows="6" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-4" placeholder="Details"></textarea>
                </div>
            </div>
        </form>
    </div>

</div>

Related Examples

Profile Form
Profile form for taking user inputs

TailwindFlex

4 years ago

15.4k
Book appointment form

Lukas Müller

3 years ago

29.5k
Advanced table

Noob

3 years ago

24k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Book Appointment form
A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

Arya

4 years ago

13.6k
Survey form
User survey form

JaxStone

3 years ago

17.6k
Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Anonymous

2 years ago

13.5k
WYSIWYG Editor Form
Form with CKEditor

I.P. Leroy

3 years ago

16.3k
Comment form

Sophia Baker

3 years ago

13k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Contact me form

Arya

3 years ago

12.9k
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Rajesh Maheshwari

1 year ago

2k