Comment form

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

Form Comment Section

Author Sophia Baker

Tailwind v3.4 13k 11

Fork Fullscreen

<div class="border border-gray-300 p-4 rounded-lg max-w-xl mx-auto mt-40">
    <h2 class="text-lg font-medium mb-2">Leave a comment</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 font-medium mb-2" for="name">
                Name
            </label>
            <input
                class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-gray-500"
                id="name" type="text" placeholder="Enter your name">
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 font-medium mb-2" for="comment">
                Comment
            </label>
            <textarea rows="4"
                class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-gray-500"
                id="comment" placeholder="Enter your comment"></textarea>
        </div>
        <div class="flex justify-end">
            <button
                class="bg-blue-500 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                type="button">Post Comment</button>
        </div>
    </form>
</div>

Related Examples

Comment section
Minimal comment section for your project

Prajwal Hallale

3 years ago

18.3k
Form for editing items

Sophia Baker

3 years ago

18.8k
Whatsapp like chat design

Simon Scheffer

3 years ago

14.2k
Nested comment section
This is a comment thread with a reply, up-vote, and down-vote buttons.

Prajwal Hallale

3 years ago

14.5k
Post Detail
Post detail with form

Sedat Kumcu

1 year ago

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

Ayman Reifoun

1 year ago

1.3k
Form Layouts

Anonymous

2 years ago

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

Abhiraj

1 year ago

2.9k
Apply Coupon Code form

Lyra Ravensong

3 years ago

9.3k
login form
this is login form

aditya_sharma

2 months ago

162
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

nicoleshal07

1 year ago

1k
OMERLINK MENU PAGE
OMERLINK MENU PAGE

Omer fils ELENGA

8 months ago

919