Home
Sophia Baker
Comment form

Comment form

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

Form Comment Section

Author Sophia Baker

12.3k

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

Author:
Prajwal Hallale

2 years ago

17.9k
Form for editing items

Author:
Sophia Baker

2 years ago

17.4k
Whatsapp like chat design

Author:
Simon Scheffer

2 years ago

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

Author:
Prajwal Hallale

3 years ago

14.3k
Post Detail
Post detail with form

Author:
Sedat Kumcu

1 year ago

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

Author:
Ayman Reifoun

6 months ago

596
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

344
Register Form
A simple and minimalistic register form.

Author:
Sonam Sherpa

1 month ago

168
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

1 year ago

2.2k
Comment section

Author:
Manuela Bianka

3 years ago

11.3k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

5 months ago

797
Contact Form Component with Responsive Design and Decorative Elements
A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

Author:
Homayoun

4 weeks ago

201

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components