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 v3.4.

Comment Section

Author Prajwal Hallale

Tailwind v3.4 10.4k 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

Prajwal Hallale

3 years ago

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

Prajwal Hallale

4 years ago

14.5k
Comments section with form

Orion.c

3 years ago

11.5k
Comment card

Simon Scheffer

3 years ago

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

Prajwal Hallale

3 years ago

7.6k
Whatsapp like chat design

Simon Scheffer

3 years ago

14.3k
Comment section

Task Master

3 years ago

10.3k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

9 months ago

727
Simple comment box

Lukas Müller

3 years ago

12.2k
Générateur de Certificat Officiel
Générateur de Certificat Officiel

Omer fils ELENGA

9 months ago

867
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
use-scroll-effect
use-scroll-effect

Omer fils ELENGA

9 months ago

986

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.