Nested comment section

This is a comment thread with a reply, up-vote, and down-vote buttons.

This tailwind example is contributed by Prajwal Hallale, on 15-Oct-2022. Component is made with Tailwind v3.4. It is responsive.

Comment Section

Author Prajwal Hallale

Tailwind v3.4 14.5k 8

Fork Fullscreen

<div class="w-fullbg-white rounded-lg border p-1 md:p-3 m-10">
    <h3 class="font-semibold p-1">Discussion</h3>
    <div class="flex flex-col gap-5 m-3">

<div>
            <div class="flex w-full justify-between border rounded-md">

<div class="p-3">
                    <div class="flex gap-3 items-center">
                        <img src="https://avatars.githubusercontent.com/u/22263436?v=4"
                                class="object-cover w-10 h-10 rounded-full border-2 border-emerald-400  shadow-emerald-400">
                        <h3 class="font-bold">
                            User 1
                            <br>
                            <span class="text-sm text-gray-400 font-normal">Level 1</span>
                        </h3>
                    </div>
                    <p class="text-gray-600 mt-2">
                        this is sample commnent
                    </p>
                    <button class="text-right text-blue-500">Reply</button>
                </div>

</div>

<div class="text-gray-300 font-bold pl-14">|</div>
            <div class="flex justify-between border ml-5  rounded-md">

<div class="p-3">
                    <div class="flex gap-3 items-center">
                        <img src="https://avatars.githubusercontent.com/u/22263436?v=4"
                                class="object-cover w-10 h-10 rounded-full border-2 border-emerald-400  shadow-emerald-400">
                        <h3 class="font-bold">
                            User 2
                            <br>
                            <span class="text-sm text-gray-400 font-normal">Level 1</span>
                        </h3>
                    </div>
                    <p class="text-gray-600 mt-2">
                        this is sample commnent
                    </p>
                </div>

</div>

<div class="text-gray-300 font-bold pl-14">|</div>
            <div class="flex justify-between border ml-5  rounded-md">
                <div class="p-3">
                    <div class="flex gap-3 items-center">
                        <img src="https://avatars.githubusercontent.com/u/22263436?v=4"
                                class="object-cover w-10 h-10 rounded-full border-2 border-emerald-400  shadow-emerald-400">
                        <h3 class="font-bold">
                            User 3
                            <br>
                            <span class="text-sm text-gray-400 font-normal">Level 1</span>
                        </h3>
                    </div>
                    <p class="text-gray-600 mt-2">
                        this is sample commnent
                    </p>
                </div>

</div>

</div>

<div class="flex gap-3 items-center">
                    <img src="https://avatars.githubusercontent.com/u/22263436?v=4"
                            class="object-cover w-10 h-10 rounded-full border-2 border-emerald-400  shadow-emerald-400">
                    <h3 class="font-bold">
                        User 4
                        <br>
                        <span class="text-sm text-gray-400 font-normal">Level 1</span>
                    </h3>

</div>
                <p class="text-gray-600 mt-2">
                    this is sample commnent
                </p>
                <button class="text-right text-blue-500">Reply</button>
            </div>

</div>

</div>

Related Examples

Comment section
Minimal comment section for your project

Prajwal Hallale

3 years ago

18.3k
Comments section with form

Orion.c

3 years ago

11.5k
Comment Section
The minimal comment section for your project with user user images.

Prajwal Hallale

4 years ago

10.4k
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.2k
Simple comment box

Lukas Müller

3 years ago

12.2k
Comment section

Task Master

3 years ago

10.3k
Comment section

Manuela Bianka

4 years ago

12.4k
Comment form

Sophia Baker

3 years ago

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

Coastal UI

2 years ago

2.7k
Free Tailwind components,
Free Tailwind components,

Omer fils ELENGA

2 weeks ago

32