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

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

Author:
Prajwal Hallale

2 years ago

13.8k
Comments section with form

Author:
Orion.c

1 year ago

9.1k
Comment card

Author:
Simon Scheffer

1 year ago

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

Author:
Prajwal Hallale

1 year ago

7.3k
Comment section

Author:
Task Master

2 years ago

8.4k
Whatsapp like chat design

Author:
Simon Scheffer

2 years ago

12k
Simple comment box

Author:
Lukas Müller

1 year ago

10.5k
Comment section

Author:
Manuela Bianka

2 years ago

10.4k
Comment form

Author:
Sophia Baker

2 years ago

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

Author:
Shariar Hasan

11 months ago

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

4 months ago

706

Explore components by Tags

Didn't find component you were looking for?

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