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 13.1k 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

19k
Whatsapp like chat design

Simon Scheffer

3 years ago

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

Prajwal Hallale

4 years ago

14.5k
Post Detail
Post detail with form

Sedat Kumcu

2 years ago

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

Ayman Reifoun

1 year ago

1.3k
Login form

Gopi Yadav

4 years ago

12.1k
Book appointment form

Lukas Müller

3 years ago

29.7k
Sign In form

Amit Pachange

3 years ago

12.8k
Sign Up Form
A premium responsive sign up page built with pure HTML and Tailwind CSS featuring a split layout, gradient background, social authentication buttons, password strength indicator, trust section, and polished SaaS-style design.

JUGENDRA GANGWAR

1 month ago

95
3D Login form
Made a responsive and the 3d animative

Sufyan jutt

9 months ago

726
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

wavy kits

1 year ago

1.1k