Home
Orion.c
Comments section with form

Comments section with form

This tailwind example is contributed by Orion.c, on 02-Apr-2023. Component is made with Tailwind CSS v3. It is responsive.

Comment Section

Author Orion.c

10.1k

Fork Fullscreen

<div class="bg-gray-100 p-6">
    <h2 class="text-lg font-bold mb-4">Comments</h2>
    <div class="flex flex-col space-y-4">
        <div class="bg-white p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-bold">John Doe</h3>
            <p class="text-gray-700 text-sm mb-2">Posted on April 17, 2023</p>
            <p class="text-gray-700">This is a sample comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-bold">Jane Smith</h3>
            <p class="text-gray-700 text-sm mb-2">Posted on April 16, 2023</p>
            <p class="text-gray-700">I agree with John. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-bold">Bob Johnson</h3>
            <p class="text-gray-700 text-sm mb-2">Posted on April 15, 2023</p>
            <p class="text-gray-700">I have a different opinion. Lorem ipsum dolor sit amet, consectetur adipiscing
                elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
        <form class="bg-white p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-bold mb-2">Add a comment</h3>
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2" for="name">
                    Name
                </label>
                <input
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    id="name" type="text" placeholder="Enter your name">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2" for="comment">
                    Comment
                </label>
                <textarea
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    id="comment" rows="3" placeholder="Enter your comment"></textarea>
            </div>
            <button
                class="bg-cyan-500 hover:bg-cyan-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                type="submit">
                Submit
            </button>
        </form>
    </div>
</div>

Related Examples

Comment section
Minimal comment section for your project

Author:
Prajwal Hallale

2 years ago

17.9k
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
Comment Section
The minimal comment section for your project with user user images.

Author:
Prajwal Hallale

3 years ago

10.3k
Comment card

Author:
Simon Scheffer

2 years ago

10.4k
User Comments Section
Display users' comments beautifully. The component also has a form for commenting.

Author:
Prajwal Hallale

2 years ago

7.5k
Simple comment box

Author:
Lukas Müller

2 years ago

11.1k
Whatsapp like chat design

Author:
Simon Scheffer

2 years ago

13.2k
Comment section

Author:
Task Master

2 years ago

9.2k
Comment form

Author:
Sophia Baker

2 years ago

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

1 week ago

166
Simple Comment Section Component
This is a Simple Comment Section Component with full responsiveness and dark mode supported

Author:
Shariar Hasan

1 year ago

2.2k
Post Detail
Post detail with form

Author:
Sedat Kumcu

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components