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

3 years ago

10.9k
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.8k
Comment section

Author:
Task Master

3 years ago

9.4k
LIQUID PLASMA by omerlinks
LIQUID PLASMA by omerlinks

Author:
Omer fils ELENGA

3 months ago

207
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Author:
Achraf Testq

1 week ago

170
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

3 months ago

199
use-scroll-effect
use-scroll-effect

Author:
Omer fils ELENGA

3 months ago

625
TailwindFlex by omerlink
TailwindFlex

Author:
Omer fils ELENGA

1 month ago

217

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: [email protected]

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12