Home
Prajwal Hallale
Comment Section

Comment Section

Forked from> @prajwal/comment-section-2

The minimal comment section for your project with user user images.

This tailwind example is contributed by Prajwal Hallale, on 28-Aug-2022. Component is made with Tailwind CSS v3.

Comment Section

Author Prajwal Hallale

10.1k

8

Fork Fullscreen

<div class="w-full bg-white rounded-lg border p-2 my-4 mx-6">

<h3 class="font-bold">Discussion</h3>

<form>

<div class="flex flex-col">

<div class="border rounded-md p-3 ml-3 my-3">
                    <div class="flex gap-3 items-center">

<img src="https://avatars.githubusercontent.com/u/22263436?v=4"
                            class="object-cover w-8 h-8 rounded-full 
                            border-2 border-emerald-400  shadow-emerald-400
                            ">

<h3 class="font-bold">
                            User name
                        </h3>
                    </div>

<p class="text-gray-600 mt-2">
                        this is sample commnent
                    </p>

</div>

<div class="border rounded-md p-3 ml-3 my-3">
                    <div class="flex gap-3 items-center">

<img src="https://avatars.githubusercontent.com/u/22263436?v=4"
                            class="object-cover w-8 h-8 rounded-full 
                            border-2 border-emerald-400  shadow-emerald-400
                            ">

<h3 class="font-bold">
                            User name
                        </h3>
                    </div>

<p class="text-gray-600 mt-2">
                        this is sample commnent
                    </p>

</div>

</div>

<div class="w-full px-3 my-2">
                <textarea
                    class="bg-gray-100 rounded border border-gray-400 leading-normal resize-none w-full h-20 py-2 px-3 font-medium placeholder-gray-700 focus:outline-none focus:bg-white"
                    name="body" placeholder='Type Your Comment' required></textarea>
            </div>

<div class="w-full flex justify-end px-3">
                <input type='submit' class="px-2.5 py-1.5 rounded-md text-white text-sm bg-indigo-500" value='Post Comment'>
            </div>
        </form>

</div>

Related Examples

Comment section
Minimal comment section for your project

Author:
Prajwal Hallale

1 year ago

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

Author:
Prajwal Hallale

2 years ago

14k
Comments section with form

Author:
Orion.c

2 years ago

9.4k
Comment card

Author:
Simon Scheffer

2 years ago

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

Author:
Prajwal Hallale

1 year ago

7.4k
Comment section

Author:
Task Master

2 years ago

8.9k
Whatsapp like chat design

Author:
Simon Scheffer

2 years ago

12.5k
Post Detail
Post detail with form

Author:
Sedat Kumcu

6 months ago

952
Comment form

Author:
Sophia Baker

2 years ago

11.8k
Customer Comments

Author:
Lautaro Gómez

9 months ago

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

Author:
Ayman Reifoun

2 weeks ago

31
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

7 months ago

979

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1