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>