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

9

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

2 years ago

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

Author:
Prajwal Hallale

3 years ago

14.4k
Comments section with form

Author:
Orion.c

2 years ago

10.7k
Comment card

Author:
Simon Scheffer

3 years ago

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

Author:
Prajwal Hallale

2 years ago

7.6k
Whatsapp like chat design

Author:
Simon Scheffer

3 years ago

13.6k
Comment section

Author:
Task Master

3 years ago

9.3k
use-scroll-effect
use-scroll-effect

Author:
Omer fils ELENGA

2 months ago

423
Comment form

Author:
Sophia Baker

3 years ago

12.6k
Portfolio by omerlinks the mouse
Portfolio by omerlinks the mouse

Author:
Omer fils ELENGA

1 month ago

180
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

1 year ago

1k
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

2 months ago

470

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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

© 2026 TailwindFlex. All Rights Reserved.

v1.12