Tailwind CSS Comments Sections

Comments with Replies

Use this minimal Tailwind Comment Section to show all comments of user or customer with reactions and replies.

Preview
Code

                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-start lg:gap-10 gap-6 inline-flex">
                <h2 class="text-gray-900 text-3xl font-bold font-manrope leading-normal">200+ Comments</h2>
                <div class="w-full flex-col justify-start items-start lg:gap-9 gap-6 flex">
                    <div class="w-full relative flex justify-between gap-2">
                        <input type="text"
                            class="w-full py-3 px-5 rounded-lg border border-gray-300 bg-white shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] focus:outline-none text-gray-900 placeholder-gray-400 text-lg font-normal leading-relaxed"
                            placeholder="Write comments here....">
                        <a href="" class="absolute right-6 top-[18px]">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                                fill="none">
                                <path
                                    d="M11.3011 8.69906L8.17808 11.8221M8.62402 12.5909L8.79264 12.8821C10.3882 15.638 11.1859 17.016 12.2575 16.9068C13.3291 16.7977 13.8326 15.2871 14.8397 12.2661L16.2842 7.93238C17.2041 5.17273 17.6641 3.79291 16.9357 3.06455C16.2073 2.33619 14.8275 2.79613 12.0679 3.71601L7.73416 5.16058C4.71311 6.16759 3.20259 6.6711 3.09342 7.7427C2.98425 8.81431 4.36221 9.61207 7.11813 11.2076L7.40938 11.3762C7.79182 11.5976 7.98303 11.7083 8.13747 11.8628C8.29191 12.0172 8.40261 12.2084 8.62402 12.5909Z"
                                    stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
                            </svg>
                        </a>
                    </div>
                    <div class="w-full flex-col justify-start items-start gap-8 flex">
                        <div class="w-full flex-col justify-start items-end gap-5 flex">
                            <div
                                class="w-full p-6 bg-white rounded-2xl border border-gray-200 flex-col justify-start items-start gap-8 flex">
                                <div class="w-full flex-col justify-center items-start gap-3.5 flex">
                                    <div class="w-full justify-between items-center inline-flex">
                                        <div class="justify-start items-center gap-2.5 flex">
                                            <div
                                                class="w-10 h-10 bg-gray-300 rounded-full justify-start items-start gap-2.5 flex">
                                                <img class="rounded-full object-cover" src="https://pagedone.io/asset/uploads/1714988283.png"
                                                    alt="Jenny wilson image" />
                                            </div>
                                            <div class="flex-col justify-start items-start gap-1 inline-flex">
                                                <h5 class="text-gray-900 text-sm font-semibold leading-snug">Jenny
                                                    Wilson</h5>
                                                <h6 class="text-gray-500 text-xs font-normal leading-5">1 hr ago</h6>
                                            </div>
                                        </div>
                                        <div class="w-6 h-6 relative">
                                            <div class="w-full h-fit flex">
                                                <div class="relative w-full">
                                                    <div class=" absolute left-0 top-0 py-2.5 px-4 text-gray-300"></div>
                                                    <button id="dropdown-button" data-target="dropdown-1"
                                                        class="w-full justify-center dropdown-toggle flex-shrink-0 z-10 flex items-center text-base font-medium text-center text-gray-900 bg-transparent  absolute right-0 top-0"
                                                        type="button">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                            viewBox="0 0 24 24" fill="none">
                                                            <path
                                                                d="M12.0161 16.9893V17.0393M12.0161 11.9756V12.0256M12.0161 6.96191V7.01191"
                                                                stroke="black" stroke-width="2.5"
                                                                stroke-linecap="round" />
                                                        </svg>
                                                    </button>
                                                    <div id="dropdown-1"
                                                        class="absolute top-10 right-0 z-20 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 open hidden">
                                                        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
                                                            aria-labelledby="dropdown-button">
                                                            <li>
                                                                <a href="#"
                                                                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a>
                                                            </li>
                                                            <li>
                                                                <a href="#"
                                                                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Save</a>
                                                            </li>
                                                            <li>
                                                                <a href="#"
                                                                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-gray-800 text-sm font-normal leading-snug">This novel's character
                                        development is outstanding! The protagonist's journey is so well-crafted and
                                        realistic. I felt like I was growing along with them as I read.</p>
                                </div>
                                <div class="w-full justify-between items-center inline-flex">
                                    <div class="justify-start items-center gap-4 flex">
                                        <div class="justify-start items-center gap-1.5 flex">
                                            <a href="">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none">
                                                    <path
                                                        d="M7.04962 9.99504L7 10M12 10L11.9504 10.005M17 10L16.9504 10.005M10.5 3H13.5C16.7875 3 18.4312 3 19.5376 3.90796C19.7401 4.07418 19.9258 4.25989 20.092 4.46243C21 5.56878 21 7.21252 21 10.5V12.4777C21 13.8941 21 14.6023 20.8226 15.1779C20.4329 16.4427 19.4427 17.4329 18.1779 17.8226C17.6023 18 16.8941 18 15.4777 18C15.0811 18 14.8828 18 14.6985 18.0349C14.2966 18.1109 13.9277 18.3083 13.6415 18.6005C13.5103 18.7345 13.4003 18.8995 13.1803 19.2295L13.1116 19.3326C12.779 19.8316 12.6126 20.081 12.409 20.198C12.1334 20.3564 11.7988 20.3743 11.5079 20.2462C11.2929 20.1515 11.101 19.9212 10.7171 19.4605L10.2896 18.9475C10.1037 18.7244 10.0108 18.6129 9.90791 18.5195C9.61025 18.2492 9.23801 18.0748 8.83977 18.0192C8.70218 18 8.55699 18 8.26662 18C7.08889 18 6.50002 18 6.01542 17.8769C4.59398 17.5159 3.48406 16.406 3.12307 14.9846C3 14.5 3 13.9111 3 12.7334V10.5C3 7.21252 3 5.56878 3.90796 4.46243C4.07418 4.25989 4.25989 4.07418 4.46243 3.90796C5.56878 3 7.21252 3 10.5 3Z"
                                                        stroke="black" stroke-width="1.6" stroke-linecap="round" />
                                                </svg>
                                            </a>
                                            <h5 class="text-gray-900 text-sm font-normal leading-snug">2 Replies</h5>
                                        </div>
                                        <div class="justify-start items-center gap-1.5 flex">
                                            <a href="">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none">
                                                    <path
                                                        d="M16 14C16 15.6569 14 17 12 17C10 17 8 15.6569 8 14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9ZM16 9C16 9.55228 15.5523 10 15 10C14.4477 10 14 9.55228 14 9C14 8.44772 14.4477 8 15 8C15.5523 8 16 8.44772 16 9Z"
                                                        stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
                                                </svg>
                                            </a>
                                            <h5 class="text-gray-900 text-sm font-normal leading-snug">Reactions</h5>
                                        </div>
                                    </div>
                                    <div class="justify-end items-center gap-1 flex">
                                        <h5 class="text-gray-500 text-sm font-normal leading-snug">30</h5>
                                        <div class="justify-start items-start flex -space-x-2 overflow-hidden">
                                            <div
                                                class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                <img class="w-3 h-3"
                                                    src="https://pagedone.io/asset/uploads/1716545141.png"
                                                    alt="Thumbs Up emoji" />
                                            </div>
                                            <div
                                                class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                <img class="w-3 h-3"
                                                    src="https://pagedone.io/asset/uploads/1716545183.png"
                                                    alt="Smiling eyes emoji" />
                                            </div>
                                            <div
                                                class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                <img class="w-3 h-3"
                                                    src="https://pagedone.io/asset/uploads/1716545217.png"
                                                    alt="hugging face emoji" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="w-full lg:pl-60 md:pl-20 sm:pl-10 pl-7 flex-col justify-start items-end gap-2.5 flex">
                                <div
                                    class="w-full p-6 bg-gray-50 rounded-2xl border border-gray-200 flex-col justify-start items-start gap-8 flex">
                                    <div class="w-full flex-col justify-center items-start gap-3.5 flex">
                                        <div class="w-full justify-between items-center inline-flex">
                                            <div class="justify-start items-center gap-2.5 flex">
                                                <div
                                                    class="w-10 h-10 bg-stone-300 rounded-full justify-start items-start gap-2.5 flex">
                                                    <img class="rounded-full object-cover" src="https://pagedone.io/asset/uploads/1710225753.png"
                                                        alt="Kevin Patel image" />
                                                </div>
                                                <div class="flex-col justify-start items-start gap-1 inline-flex">
                                                    <h5 class="text-gray-900 text-sm font-semibold leading-snug">Kevin
                                                        Patel</h5>
                                                    <h6 class="text-gray-500 text-xs font-normal leading-5">60 mins ago
                                                    </h6>
                                                </div>
                                            </div>
                                            <div class="w-6 h-6 relative">
                                                <div class="w-full h-fit flex">
                                                    <div class="relative w-full">
                                                        <div class=" absolute left-0 top-0 py-2.5 px-4 text-gray-300">
                                                        </div>
                                                        <button id="dropdown-button" data-target="dropdown-2"
                                                            class="w-full justify-center dropdown-toggle flex-shrink-0 z-10 flex items-center text-base font-medium text-center text-gray-900 bg-transparent  absolute right-0 top-0"
                                                            type="button">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                height="24" viewBox="0 0 24 24" fill="none">
                                                                <path
                                                                    d="M12.0161 16.9893V17.0393M12.0161 11.9756V12.0256M12.0161 6.96191V7.01191"
                                                                    stroke="black" stroke-width="2.5"
                                                                    stroke-linecap="round" />
                                                            </svg>
                                                        </button>
                                                        <div id="dropdown-2"
                                                            class="absolute top-10 right-0 z-20 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 open hidden">
                                                            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
                                                                aria-labelledby="dropdown-button">
                                                                <li>
                                                                    <a href="#"
                                                                        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#"
                                                                        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Save</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#"
                                                                        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="text-gray-800 text-sm font-normal leading-snug">Absolutely! I was
                                            amazed at how much they grew throughout the story. The way the author
                                            portrayed their struggles and triumphs was truly inspiring.</p>
                                    </div>
                                    <div class="w-full justify-between items-center inline-flex">
                                        <div class="justify-start items-center gap-4 flex">
                                            <div class="justify-start items-center gap-1.5 flex">
                                                <a href="">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none">
                                                        <path
                                                            d="M7.04962 9.99504L7 10M12 10L11.9504 10.005M17 10L16.9504 10.005M10.5 3H13.5C16.7875 3 18.4312 3 19.5376 3.90796C19.7401 4.07418 19.9258 4.25989 20.092 4.46243C21 5.56878 21 7.21252 21 10.5V12.4777C21 13.8941 21 14.6023 20.8226 15.1779C20.4329 16.4427 19.4427 17.4329 18.1779 17.8226C17.6023 18 16.8941 18 15.4777 18C15.0811 18 14.8828 18 14.6985 18.0349C14.2966 18.1109 13.9277 18.3083 13.6415 18.6005C13.5103 18.7345 13.4003 18.8995 13.1803 19.2295L13.1116 19.3326C12.779 19.8316 12.6126 20.081 12.409 20.198C12.1334 20.3564 11.7988 20.3743 11.5079 20.2462C11.2929 20.1515 11.101 19.9212 10.7171 19.4605L10.2896 18.9475C10.1037 18.7244 10.0108 18.6129 9.90791 18.5195C9.61025 18.2492 9.23801 18.0748 8.83977 18.0192C8.70218 18 8.55699 18 8.26662 18C7.08889 18 6.50002 18 6.01542 17.8769C4.59398 17.5159 3.48406 16.406 3.12307 14.9846C3 14.5 3 13.9111 3 12.7334V10.5C3 7.21252 3 5.56878 3.90796 4.46243C4.07418 4.25989 4.25989 4.07418 4.46243 3.90796C5.56878 3 7.21252 3 10.5 3Z"
                                                            stroke="black" stroke-width="1.6" stroke-linecap="round" />
                                                    </svg>
                                                </a>
                                                <h5 class="text-gray-900 text-sm font-normal leading-snug">Replies</h5>
                                            </div>
                                            <div class="justify-start items-center gap-1.5 flex">
                                                <a href="">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none">
                                                        <path
                                                            d="M16 14C16 15.6569 14 17 12 17C10 17 8 15.6569 8 14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9ZM16 9C16 9.55228 15.5523 10 15 10C14.4477 10 14 9.55228 14 9C14 8.44772 14.4477 8 15 8C15.5523 8 16 8.44772 16 9Z"
                                                            stroke="#111827" stroke-width="1.6"
                                                            stroke-linecap="round" />
                                                    </svg>
                                                </a>
                                                <h5 class="text-gray-900 text-sm font-normal leading-snug">Reactions
                                                </h5>
                                            </div>
                                        </div>
                                        <div class="justify-end items-center gap-1 flex">
                                            <h5 class="text-gray-500 text-sm font-normal leading-snug">4</h5>
                                            <div class="justify-start items-start flex -space-x-2 overflow-hidden">
                                                <div
                                                    class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                    <img class="w-3 h-3"
                                                        src="https://pagedone.io/asset/uploads/1716545141.png"
                                                        alt="Thumbs Up emoji" />
                                                </div>
                                                <div
                                                    class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                    <img class="w-3 h-3"
                                                        src="https://pagedone.io/asset/uploads/1716545183.png"
                                                        alt="Smiling eyes emoji" />
                                                </div>
                                                <div
                                                    class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                    <img class="w-3 h-3"
                                                        src="https://pagedone.io/asset/uploads/1716545217.png"
                                                        alt="hugging face emoji" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="w-full lg:pl-60 md:pl-20 sm:pl-10 pl-7 flex-col justify-start items-end gap-2.5 flex">
                                <div
                                    class="w-full p-6 bg-gray-50 rounded-2xl border border-gray-200 flex-col justify-start items-start gap-8 flex">
                                    <div class="w-full flex-col justify-center items-start gap-3.5 flex">
                                        <div class="w-full justify-between items-center inline-flex">
                                            <div class="justify-start items-center gap-2.5 flex">
                                                <div
                                                    class="w-10 h-10 bg-stone-300 rounded-full justify-start items-start gap-2.5 flex">
                                                    <img class="rounded-full object-cover" src="https://pagedone.io/asset/uploads/1716546816.png"
                                                        alt="James Anderson image" />
                                                </div>
                                                <div class="flex-col justify-start items-start gap-1 inline-flex">
                                                    <h5 class="text-gray-900 text-sm font-semibold leading-snug">James
                                                        Anderson</h5>
                                                    <h6 class="text-gray-500 text-xs font-normal leading-5">25 mins ago
                                                    </h6>
                                                </div>
                                            </div>
                                            <div class="w-6 h-6 relative">
                                                <div class="w-full h-fit flex">
                                                    <div class="relative w-full">
                                                        <div class=" absolute left-0 top-0 py-2.5 px-4 text-gray-300">
                                                        </div>
                                                        <button id="dropdown-button" data-target="dropdown-3"
                                                            class="w-full justify-center dropdown-toggle flex-shrink-0 z-10 flex items-center text-base font-medium text-center text-gray-900 bg-transparent  absolute right-0 top-0"
                                                            type="button">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                height="24" viewBox="0 0 24 24" fill="none">
                                                                <path
                                                                    d="M12.0161 16.9893V17.0393M12.0161 11.9756V12.0256M12.0161 6.96191V7.01191"
                                                                    stroke="black" stroke-width="2.5"
                                                                    stroke-linecap="round" />
                                                            </svg>
                                                        </button>
                                                        <div id="dropdown-3"
                                                            class="absolute top-10 right-0 z-20 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 open hidden">
                                                            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
                                                                aria-labelledby="dropdown-button">
                                                                <li>
                                                                    <a href="#"
                                                                        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#"
                                                                        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Save</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#"
                                                                        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="text-gray-800 text-sm font-normal leading-snug">I agree, and I also
                                            loved how the secondary characters evolved. Each one had their own unique
                                            arc that added depth to the overall narrative.</p>
                                    </div>
                                    <div class="w-full justify-between items-center inline-flex">
                                        <div class="justify-start items-center gap-4 flex">
                                            <div class="justify-start items-center gap-1.5 flex">
                                                <a href="">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none">
                                                        <path
                                                            d="M7.04962 9.99504L7 10M12 10L11.9504 10.005M17 10L16.9504 10.005M10.5 3H13.5C16.7875 3 18.4312 3 19.5376 3.90796C19.7401 4.07418 19.9258 4.25989 20.092 4.46243C21 5.56878 21 7.21252 21 10.5V12.4777C21 13.8941 21 14.6023 20.8226 15.1779C20.4329 16.4427 19.4427 17.4329 18.1779 17.8226C17.6023 18 16.8941 18 15.4777 18C15.0811 18 14.8828 18 14.6985 18.0349C14.2966 18.1109 13.9277 18.3083 13.6415 18.6005C13.5103 18.7345 13.4003 18.8995 13.1803 19.2295L13.1116 19.3326C12.779 19.8316 12.6126 20.081 12.409 20.198C12.1334 20.3564 11.7988 20.3743 11.5079 20.2462C11.2929 20.1515 11.101 19.9212 10.7171 19.4605L10.2896 18.9475C10.1037 18.7244 10.0108 18.6129 9.90791 18.5195C9.61025 18.2492 9.23801 18.0748 8.83977 18.0192C8.70218 18 8.55699 18 8.26662 18C7.08889 18 6.50002 18 6.01542 17.8769C4.59398 17.5159 3.48406 16.406 3.12307 14.9846C3 14.5 3 13.9111 3 12.7334V10.5C3 7.21252 3 5.56878 3.90796 4.46243C4.07418 4.25989 4.25989 4.07418 4.46243 3.90796C5.56878 3 7.21252 3 10.5 3Z"
                                                            stroke="black" stroke-width="1.6" stroke-linecap="round" />
                                                    </svg>
                                                </a>
                                                <h5 class="text-gray-900 text-sm font-normal leading-snug">Replies</h5>
                                            </div>
                                            <div class="justify-start items-center gap-1.5 flex">
                                                <a href="">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none">
                                                        <path
                                                            d="M16 14C16 15.6569 14 17 12 17C10 17 8 15.6569 8 14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9ZM16 9C16 9.55228 15.5523 10 15 10C14.4477 10 14 9.55228 14 9C14 8.44772 14.4477 8 15 8C15.5523 8 16 8.44772 16 9Z"
                                                            stroke="#111827" stroke-width="1.6"
                                                            stroke-linecap="round" />
                                                    </svg>
                                                </a>
                                                <h5 class="text-gray-900 text-sm font-normal leading-snug">Reactions
                                                </h5>
                                            </div>
                                        </div>
                                        <div class="justify-end items-center gap-1 flex">
                                            <h5 class="text-gray-500 text-sm font-normal leading-snug">2</h5>
                                            <div class="justify-start items-start flex -space-x-2 overflow-hidden">
                                                <div
                                                    class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                    <img class="w-3 h-3"
                                                        src="https://pagedone.io/asset/uploads/1716545141.png"
                                                        alt="Thumbs Up emoji" />
                                                </div>
                                                <div
                                                    class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                    <img class="w-3 h-3"
                                                        src="https://pagedone.io/asset/uploads/1716545183.png"
                                                        alt="Smiling eyes emoji" />
                                                </div>
                                                <div
                                                    class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                    <img class="w-3 h-3"
                                                        src="https://pagedone.io/asset/uploads/1716545217.png"
                                                        alt="hugging face emoji" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full flex-col justify-start items-end gap-5 flex">
                            <div
                                class="w-full p-6 bg-white rounded-2xl border border-gray-200 flex-col justify-start items-start gap-8 flex">
                                <div class="w-full flex-col justify-center items-start gap-3.5 flex">
                                    <div class="w-full justify-between items-center inline-flex">
                                        <div class="justify-start items-center gap-2.5 flex">
                                            <div
                                                class="w-10 h-10 bg-gray-200 rounded-full justify-start items-start gap-2.5 flex">
                                                <img class="rounded-full object-cover" src="https://pagedone.io/asset/uploads/1710225621.png"
                                                    alt="Robert Wilson image" />
                                            </div>
                                            <div class="flex-col justify-start items-start gap-1 inline-flex">
                                                <h5 class="text-gray-900 text-sm font-semibold leading-snug">Robert
                                                    Wilson</h5>
                                                <h6 class="text-gray-500 text-xs font-normal leading-5">6 hr ago</h6>
                                            </div>
                                        </div>
                                        <div class="w-6 h-6 relative">
                                            <div class="w-full h-fit flex">
                                                <div class="relative w-full">
                                                    <div class=" absolute left-0 top-0 py-2.5 px-4 text-gray-300"></div>
                                                    <button id="dropdown-button" data-target="dropdown-4"
                                                        class="w-full justify-center dropdown-toggle flex-shrink-0 z-10 flex items-center text-base font-medium text-center text-gray-900 bg-transparent  absolute right-0 top-0"
                                                        type="button">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                            viewBox="0 0 24 24" fill="none">
                                                            <path
                                                                d="M12.0161 16.9893V17.0393M12.0161 11.9756V12.0256M12.0161 6.96191V7.01191"
                                                                stroke="black" stroke-width="2.5"
                                                                stroke-linecap="round" />
                                                        </svg>
                                                    </button>
                                                    <div id="dropdown-4"
                                                        class="absolute top-10 right-0 z-20 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 open hidden">
                                                        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
                                                            aria-labelledby="dropdown-button">
                                                            <li>
                                                                <a href="#"
                                                                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a>
                                                            </li>
                                                            <li>
                                                                <a href="#"
                                                                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Save</a>
                                                            </li>
                                                            <li>
                                                                <a href="#"
                                                                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-gray-800 text-sm font-normal leading-snug">The themes in this book
                                        really made me think about life and purpose. It's a very introspective read that
                                        encourages self-reflection and personal growth. The way the author weaves
                                        philosophical questions into the storyline is seamless and thought-provoking.
                                        Each chapter seemed to pose new questions about identity, morality, and the
                                        human condition. It’s one of those books that stays with you long after you’ve
                                        turned the last page, prompting you to reflect on your own beliefs and values.
                                        The narrative was both compelling and enlightening, providing a deep dive into
                                        the complexities of life.</p>
                                </div>
                                <div class="w-full justify-between items-center inline-flex">
                                    <div class="justify-start items-center gap-4 flex">
                                        <div class="justify-start items-center gap-1.5 flex">
                                            <a href="">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none">
                                                    <path
                                                        d="M7.04962 9.99504L7 10M12 10L11.9504 10.005M17 10L16.9504 10.005M10.5 3H13.5C16.7875 3 18.4312 3 19.5376 3.90796C19.7401 4.07418 19.9258 4.25989 20.092 4.46243C21 5.56878 21 7.21252 21 10.5V12.4777C21 13.8941 21 14.6023 20.8226 15.1779C20.4329 16.4427 19.4427 17.4329 18.1779 17.8226C17.6023 18 16.8941 18 15.4777 18C15.0811 18 14.8828 18 14.6985 18.0349C14.2966 18.1109 13.9277 18.3083 13.6415 18.6005C13.5103 18.7345 13.4003 18.8995 13.1803 19.2295L13.1116 19.3326C12.779 19.8316 12.6126 20.081 12.409 20.198C12.1334 20.3564 11.7988 20.3743 11.5079 20.2462C11.2929 20.1515 11.101 19.9212 10.7171 19.4605L10.2896 18.9475C10.1037 18.7244 10.0108 18.6129 9.90791 18.5195C9.61025 18.2492 9.23801 18.0748 8.83977 18.0192C8.70218 18 8.55699 18 8.26662 18C7.08889 18 6.50002 18 6.01542 17.8769C4.59398 17.5159 3.48406 16.406 3.12307 14.9846C3 14.5 3 13.9111 3 12.7334V10.5C3 7.21252 3 5.56878 3.90796 4.46243C4.07418 4.25989 4.25989 4.07418 4.46243 3.90796C5.56878 3 7.21252 3 10.5 3Z"
                                                        stroke="black" stroke-width="1.6" stroke-linecap="round" />
                                                </svg>
                                            </a>
                                            <h5 class="text-gray-900 text-sm font-normal leading-snug">1 Replies</h5>
                                        </div>
                                        <div class="justify-start items-center gap-1.5 flex">
                                            <a href="">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none">
                                                    <path
                                                        d="M16 14C16 15.6569 14 17 12 17C10 17 8 15.6569 8 14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9ZM16 9C16 9.55228 15.5523 10 15 10C14.4477 10 14 9.55228 14 9C14 8.44772 14.4477 8 15 8C15.5523 8 16 8.44772 16 9Z"
                                                        stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
                                                </svg>
                                            </a>
                                            <h5 class="text-gray-900 text-sm font-normal leading-snug">Reactions</h5>
                                        </div>
                                    </div>
                                    <div class="justify-end items-center gap-1 flex">
                                        <h5 class="text-gray-500 text-sm font-normal leading-snug">62</h5>
                                        <div class="justify-start items-start flex -space-x-2 overflow-hidden">
                                            <div
                                                class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                <img class="w-3 h-3"
                                                    src="https://pagedone.io/asset/uploads/1716545141.png"
                                                    alt="Thumbs Up emoji" />
                                            </div>
                                            <div
                                                class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                <img class="w-3 h-3"
                                                    src="https://pagedone.io/asset/uploads/1716545183.png"
                                                    alt="Smiling eyes emoji" />
                                            </div>
                                            <div
                                                class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                <img class="w-3 h-3"
                                                    src="https://pagedone.io/asset/uploads/1716545217.png"
                                                    alt="hugging face emoji" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="w-full lg:pl-60 md:pl-20 sm:pl-10 pl-7 flex-col justify-start items-end gap-2.5 flex">
                                <div
                                    class="w-full p-6 bg-gray-50 rounded-2xl border border-gray-200 flex-col justify-start items-start gap-8 flex">
                                    <div class="w-full flex-col justify-center items-start gap-3.5 flex">
                                        <div class="w-full justify-between items-center inline-flex">
                                            <div class="justify-start items-center gap-2.5 flex">
                                                <div
                                                    class="w-10 h-10 bg-stone-300 rounded-full justify-start items-start gap-2.5 flex">
                                                    <img class="w-10 h-10 rounded-full object-cover"
                                                        src="https://pagedone.io/asset/uploads/1710238051.png"
                                                        alt="Sarah Davis image" />
                                                </div>
                                                <div class="flex-col justify-start items-start gap-1 inline-flex">
                                                    <h5 class="text-gray-900 text-sm font-semibold leading-snug">Sarah
                                                        Davis</h5>
                                                    <h6 class="text-gray-500 text-xs font-normal leading-5">2 hr ago
                                                    </h6>
                                                </div>
                                            </div>
                                            <div class="w-6 h-6 relative">
                                                <div class="w-full h-fit flex">
                                                    <div class="relative w-full">
                                                        <div class=" absolute left-0 top-0 py-2.5 px-4 text-gray-300">
                                                        </div>
                                                        <button id="dropdown-button" data-target="dropdown-5"
                                                            class="w-full justify-center dropdown-toggle flex-shrink-0 z-10 flex items-center text-base font-medium text-center text-gray-900 bg-transparent  absolute right-0 top-0"
                                                            type="button">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                height="24" viewBox="0 0 24 24" fill="none">
                                                                <path
                                                                    d="M12.0161 16.9893V17.0393M12.0161 11.9756V12.0256M12.0161 6.96191V7.01191"
                                                                    stroke="black" stroke-width="2.5"
                                                                    stroke-linecap="round" />
                                                            </svg>
                                                        </button>
                                                        <div id="dropdown-5"
                                                            class="absolute top-10 right-0 z-20 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 open hidden">
                                                            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
                                                                aria-labelledby="dropdown-button">
                                                                <li>
                                                                    <a href="#"
                                                                        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#"
                                                                        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Save</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#"
                                                                        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="text-gray-800 text-sm font-normal leading-snug">Same here. It's rare
                                            for a book to have such a lasting impact on my thoughts and perspectives.
                                            The narrative was both compelling and enlightening, truly a
                                            thought-provoking read. I found myself pondering the themes long after I’d
                                            finished the book, which is a testament to the author’s skill in crafting
                                            such a reflective and meaningful story. It’s the kind of book that sparks
                                            deep conversations and stays with you for a long time.</p>
                                    </div>
                                    <div class="w-full justify-between items-center inline-flex">
                                        <div class="justify-start items-center gap-4 flex">
                                            <div class="justify-start items-center gap-1.5 flex">
                                                <a href="">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none">
                                                        <path
                                                            d="M7.04962 9.99504L7 10M12 10L11.9504 10.005M17 10L16.9504 10.005M10.5 3H13.5C16.7875 3 18.4312 3 19.5376 3.90796C19.7401 4.07418 19.9258 4.25989 20.092 4.46243C21 5.56878 21 7.21252 21 10.5V12.4777C21 13.8941 21 14.6023 20.8226 15.1779C20.4329 16.4427 19.4427 17.4329 18.1779 17.8226C17.6023 18 16.8941 18 15.4777 18C15.0811 18 14.8828 18 14.6985 18.0349C14.2966 18.1109 13.9277 18.3083 13.6415 18.6005C13.5103 18.7345 13.4003 18.8995 13.1803 19.2295L13.1116 19.3326C12.779 19.8316 12.6126 20.081 12.409 20.198C12.1334 20.3564 11.7988 20.3743 11.5079 20.2462C11.2929 20.1515 11.101 19.9212 10.7171 19.4605L10.2896 18.9475C10.1037 18.7244 10.0108 18.6129 9.90791 18.5195C9.61025 18.2492 9.23801 18.0748 8.83977 18.0192C8.70218 18 8.55699 18 8.26662 18C7.08889 18 6.50002 18 6.01542 17.8769C4.59398 17.5159 3.48406 16.406 3.12307 14.9846C3 14.5 3 13.9111 3 12.7334V10.5C3 7.21252 3 5.56878 3.90796 4.46243C4.07418 4.25989 4.25989 4.07418 4.46243 3.90796C5.56878 3 7.21252 3 10.5 3Z"
                                                            stroke="black" stroke-width="1.6" stroke-linecap="round" />
                                                    </svg>
                                                </a>
                                                <h5 class="text-gray-900 text-sm font-normal leading-snug">3 Replies
                                                </h5>
                                            </div>
                                            <div class="justify-start items-center gap-1.5 flex">
                                                <a href="">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none">
                                                        <path
                                                            d="M16 14C16 15.6569 14 17 12 17C10 17 8 15.6569 8 14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9ZM16 9C16 9.55228 15.5523 10 15 10C14.4477 10 14 9.55228 14 9C14 8.44772 14.4477 8 15 8C15.5523 8 16 8.44772 16 9Z"
                                                            stroke="#111827" stroke-width="1.6"
                                                            stroke-linecap="round" />
                                                    </svg>
                                                </a>
                                                <h5 class="text-gray-900 text-sm font-normal leading-snug">Reactions
                                                </h5>
                                            </div>
                                        </div>
                                        <div class="justify-end items-center gap-1 flex">
                                            <h5 class="text-gray-500 text-sm font-normal leading-snug">10</h5>
                                            <div class="justify-start items-start flex -space-x-2 overflow-hidden">
                                                <div
                                                    class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                    <img class="w-3 h-3"
                                                        src="https://pagedone.io/asset/uploads/1716545141.png"
                                                        alt="Thumbs Up emoji" />
                                                </div>
                                                <div
                                                    class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                    <img class="w-3 h-3"
                                                        src="https://pagedone.io/asset/uploads/1716545183.png"
                                                        alt="Smiling eyes emoji" />
                                                </div>
                                                <div
                                                    class="p-1.5 inline-block ring-1 ring-white bg-gray-100 rounded-full border border-white justify-center items-center flex">
                                                    <img class="w-3 h-3"
                                                        src="https://pagedone.io/asset/uploads/1716545217.png"
                                                        alt="hugging face emoji" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Basic comments list with like and CTA Button

Use following comment section example to show list of comments with like button and CTA button to edit or delete comment.

Preview
Code

Figma File

                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-start lg:gap-14 gap-7 inline-flex">
                <h2 class="text-gray-900 text-4xl font-bold font-manrope leading-normal">Comments</h2>
                <div class="w-full flex-col justify-start items-start gap-8 flex">
                    <div
                        class="w-full lg:p-8 p-5 bg-white rounded-3xl border border-gray-200 flex-col justify-start items-start flex">
                        <div class="w-full flex-col justify-start items-start gap-3.5 flex">
                            <div class="w-full justify-between items-center inline-flex">
                                <div class="justify-start items-center gap-2.5 flex">
                                    <div
                                        class="w-10 h-10 bg-stone-300 rounded-full justify-start items-start gap-2.5 flex">
                                        <img class="rounded-full object-cover" src="https://pagedone.io/asset/uploads/1710225753.png"
                                            alt="John smith image" />
                                    </div>
                                    <div class="flex-col justify-start items-start gap-1 inline-flex">
                                        <h5 class="text-gray-900 text-sm font-semibold leading-snug">John smith</h5>
                                        <h6 class="text-gray-500 text-xs font-normal leading-5">5 Day ago</h6>
                                    </div>
                                </div>
                                <div class="group justify-end items-center flex">
                                    <div
                                        class="px-5 py-2.5 rounded-xl shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-400 hover:border-green-600 transition-all duration-700 ease-in-out justify-center items-center flex">
                                        <a href="" class="">
                                            <svg class="group-hover:text-green-600 text-gray-400 group-hover:fill-green-600 fill-white transition-all duration-700 ease-in-out"
                                                xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                viewBox="0 0 20 20" fill="none">
                                                <path
                                                    d="M2.62629 3.43257C4.64001 1.44869 7.82082 1.31134 9.99614 3.02053C12.1723 1.31134 15.3589 1.44869 17.3726 3.43257L17.3734 3.43334C19.5412 5.57611 19.5412 9.04382 17.3804 11.1867L17.378 11.1891L10.4631 17.9764C10.2035 18.2312 9.78765 18.2309 9.52844 17.9758L2.62629 11.1821C0.457252 9.04516 0.457252 5.56947 2.62629 3.43257Z"
                                                    stroke="currentColor" />
                                            </svg>
                                        </a>
                                        <div class="px-2 justify-center items-center flex">
                                            <h5
                                                class="group-hover:text-green-600 text-gray-400 transition-all duration-700 ease-in-out text-base font-semibold leading-relaxed">
                                                34</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-800 text-sm font-normal leading-snug">Mauris luctus habitasse turpis
                                elementum vitae in. Ut habitasse orci sed aliquam bibendum. Sem in nisl vestibulum
                                rhoncus sed diam amet nulla. Netus feugiat nunc vulputate eros pellentesque. A at augue
                                elementum aliquet in aliquet. Vitae amet quisque massa egestas amet. Vitae id ipsum
                                lacus tellus facilisis sit. Nunc ut pellentesque lacus massa arcu neque mi ultrices
                                convallis.</p>
                        </div>
                    </div>
                    <div
                        class="w-full lg:p-8 p-5 bg-white rounded-3xl border border-gray-200 flex-col justify-start items-start gap-2.5 flex">
                        <div class="w-full flex-col justify-start items-start gap-3.5 flex">
                            <div class="w-full justify-between items-center inline-flex">
                                <div class="justify-start items-center gap-2.5 flex">
                                    <div
                                        class="w-10 h-10 bg-stone-300 rounded-full justify-start items-start gap-2.5 flex">
                                        <img class="w-10 h-10 rounded-full object-cover"
                                            src="https://pagedone.io/asset/uploads/1710238051.png"
                                            alt="Emma Davis image" />
                                    </div>
                                    <div class="flex-col justify-start items-start gap-1 inline-flex">
                                        <h5 class="text-gray-900 text-sm font-semibold leading-snug">Emma Davis</h5>
                                        <h6 class="text-gray-500 text-xs font-normal leading-5">4 Day ago</h6>
                                    </div>
                                </div>
                                <div class="group justify-end items-center flex">
                                    <div
                                        class="px-5 py-2.5 rounded-xl shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-400 hover:border-green-600 transition-all duration-700 ease-in-out  justify-center items-center flex">
                                        <a href="" class="">
                                            <svg class="group-hover:text-green-600 text-gray-400 group-hover:fill-green-600 fill-white transition-all duration-700 ease-in-out"
                                                xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                viewBox="0 0 20 20" fill="none">
                                                <path
                                                    d="M2.62629 3.43257C4.64001 1.44869 7.82082 1.31134 9.99614 3.02053C12.1723 1.31134 15.3589 1.44869 17.3726 3.43257L17.3734 3.43334C19.5412 5.57611 19.5412 9.04382 17.3804 11.1867L17.378 11.1891L10.4631 17.9764C10.2035 18.2312 9.78765 18.2309 9.52844 17.9758L2.62629 11.1821C0.457252 9.04516 0.457252 5.56947 2.62629 3.43257Z"
                                                    stroke="currentColor" />
                                            </svg>
                                        </a>
                                        <div class="px-2 justify-center items-center flex">
                                            <h6
                                                class="group-hover:text-green-600 text-gray-400 transition-all duration-700 ease-in-out text-base font-semibold leading-relaxed">
                                                30</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-800 text-sm font-normal leading-snug">Consectetur proin ac ac urna nulla
                                gravida praesent id. Dapibus elementum bibendum non diam vel. Pellentesque ut risus sit
                                pretium. Quis ac interdum at habitant montes molestie. Amet nunc dapibus at molestie
                                amet. Cursus ullamcorper ipsum phasellus id nisl euismod accumsan. Pellentesque
                                fermentum mauris purus commodo enim. Consequat est ipsum viverra curabitur.</p>
                        </div>
                    </div>
                    <div
                        class="w-full lg:p-8 p-5 bg-white rounded-3xl border border-gray-200 flex-col justify-start items-end gap-2.5 flex">
                        <div class="w-full flex-col justify-start items-end gap-3.5 flex">
                            <div class="w-full justify-between items-center inline-flex">
                                <div class="w-full justify-start items-center gap-2.5 flex">
                                    <div
                                        class="w-10 h-10 bg-slate-400 rounded-full justify-start items-start gap-2.5 flex">
                                        <img class="w-10 h-10 rounded-full object-cover"
                                            src="https://pagedone.io/asset/uploads/1710237485.png"
                                            alt="Danial Harrison image" />
                                    </div>
                                    <div class="flex-col justify-start items-start gap-1 inline-flex">
                                        <h5 class="text-gray-900 text-sm font-semibold leading-snug">Danial Harrison
                                        </h5>
                                        <h6 class="text-gray-500 text-xs font-normal leading-5">5 Hour ago</h6>
                                    </div>
                                </div>
                                <div class="group justify-end items-center flex">
                                    <div
                                        class="px-5 py-2.5 rounded-xl shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-400 hover:border-green-600 transition-all duration-700 ease-in-out  justify-center items-center flex">
                                        <a href="" class="">
                                            <svg class="group-hover:text-green-600 text-gray-400 group-hover:fill-green-600 fill-white transition-all duration-700 ease-in-out"
                                                xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                viewBox="0 0 20 20" fill="none">
                                                <path
                                                    d="M2.62629 3.43257C4.64001 1.44869 7.82082 1.31134 9.99614 3.02053C12.1723 1.31134 15.3589 1.44869 17.3726 3.43257L17.3734 3.43334C19.5412 5.57611 19.5412 9.04382 17.3804 11.1867L17.378 11.1891L10.4631 17.9764C10.2035 18.2312 9.78765 18.2309 9.52844 17.9758L2.62629 11.1821C0.457252 9.04516 0.457252 5.56947 2.62629 3.43257Z"
                                                    stroke="currentColor" />
                                            </svg>
                                        </a>
                                        <div class="px-2 justify-center items-center flex">
                                            <h6
                                                class="group-hover:text-green-600 text-gray-400 transition-all duration-700 ease-in-out text-base font-semibold leading-relaxed">
                                                80</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-800 text-sm font-normal leading-snug">Malesuada rhoncus senectus amet
                                dui tincidunt. Porttitor lectus diam sit sit pellentesque ultrices. Molestie libero ac
                                odio at tristique sapien est venenatis. Egestas vitae velit vestibulum egestas felis
                                euismod. Morbi ac vel scelerisque morbi eu nisi gravida tellus. Pulvinar orci at
                                elementum massa morbi pellentesque non nulla. Elementum faucibus urna est mattis. Non
                                aliquet in molestie id nisl. Bibendum mauris dolor nisl elit ut eu viverra. Ut facilisi
                                turpis neque eu risus etiam senectus vel. Orci pharetra ornare amet massa. Tempus orci
                                vestibulum pulvinar tincidunt amet dictum sit tempor.</p>
                            <div class="w-full justify-end items-start gap-6 inline-flex">
                                <button
                                    class="sm:w-fit w-full px-5 py-2.5 rounded-xl shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] hover:bg-gray-200 hover:border-transparent transition-all duration-700 ease-in-out border border-gray-200 justify-center items-center flex">
                                    <span
                                        class="px-2 text-gray-900 text-base font-semibold leading-relaxed">Delete</span>
                                </button>
                                <button
                                    class="sm:w-fit w-full px-5 py-2.5 bg-green-600 hover:bg-green-700 transition-all duration-700 ease-in-out rounded-xl shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] justify-center items-center flex">
                                    <span
                                        class="px-2 py-px text-white text-base font-semibold leading-relaxed">Edit</span>
                                </button>

                            </div>
                        </div>
                    </div>
                    <div class="w-full relative flex justify-between gap-2">
                        <input type="text"
                            class="w-full py-3 px-5 rounded-lg border border-gray-300 bg-white shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] focus:outline-none text-gray-900 placeholder-gray-400 text-lg font-normal leading-relaxed"
                            placeholder="Leave a constructive comment...">
                        <a href="" class="absolute right-6 top-[18px]">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                                fill="none">
                                <g clip-path="url(#clip0_2063_2504)">
                                    <path
                                        d="M10.0194 1.66699V5.6556C1.69526 5.6556 1.54178 14.4163 1.69573 18.3337C1.69573 16.4818 5.84659 10.0003 10.0194 10.6414V14.63L18.3332 8.14847L10.0194 1.66699Z"
                                        stroke="#111827" stroke-width="1.6" stroke-linejoin="round" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_2063_2504">
                                        <rect width="20" height="20" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Comments section with form

This example of Tailwind CSS Comments shows form field to post comments and also display a list of all older comments with like, share and delete buttons.

Preview
Code

Figma File

                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-start lg:gap-14 gap-7 inline-flex">
                <h2 class="w-full text-gray-900 text-4xl font-bold font-manrope leading-normal">Comments</h2>
                <div class="w-full flex-col justify-start items-start gap-5 flex">
                    <div class="w-full rounded-3xl justify-start items-start gap-3.5 inline-flex">
                        <img class="w-10 h-10 object-cover" src="https://pagedone.io/asset/uploads/1710225753.png" alt="John smith image" />
                        <textarea name="" rows="5" class="w-full px-5 py-3 rounded-2xl border border-gray-300 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] resize-none focus:outline-none placeholder-gray-400 text-gray-900 text-lg font-normal leading-7" placeholder="Write a your thoughts here...."></textarea>
                    </div>
                    <button class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-800 transition-all duration-700 ease-in-out rounded-xl shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] justify-center items-center flex">
                        <span class="px-2 py-px text-white text-base font-semibold leading-relaxed">Post your comment</span>
                    </button>
                </div>
                <div class="w-full flex-col justify-start items-start gap-8 flex">
                    <div class="w-full pb-6 border-b border-gray-300 justify-start items-start gap-2.5 inline-flex">
                        <img class="w-10 h-10 rounded-full object-cover" src="https://pagedone.io/asset/uploads/1710226776.png" alt="Mia Thompson image" />
                        <div class="w-full flex-col justify-start items-start gap-3.5 inline-flex">
                            <div class="w-full justify-start items-start flex-col flex gap-1">
                                <div class="w-full justify-between items-start gap-1 inline-flex">
                                    <h5 class="text-gray-900 text-sm font-semibold leading-snug">Mia Thompson</h5>
                                    <span class="text-right text-gray-500 text-xs font-normal leading-5">12 hour ago</span>
                                </div>
                                <h5 class="text-gray-800 text-sm font-normal leading-snug">In vestibulum sed aliquet id turpis. Sagittis sed sed adipiscing velit habitant quam. Neque feugiat consectetur consectetur turpis.</h5>
                            </div>
                            <div class="justify-start items-start gap-5 inline-flex">
                                <a href="" class="w-5 h-5 flex items-center justify-center group">
                                    <svg class="text-indigo-600 group-hover:text-indigo-800 transition-all duration-700 ease-in-out" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path d="M8.57084 0.140905C8.77176 -0.0157322 9.04438 -0.0441704 9.2733 0.067628C9.50221 0.179426 9.6474 0.411912 9.6474 0.666672V4.007C11.5347 4.11302 13.0359 4.67225 14.2134 5.55105C15.5204 6.52639 16.3797 7.85847 16.9418 9.28015C18.0571 12.1006 18.0478 15.3937 17.9706 17.3595C17.9563 17.7223 17.6544 18.007 17.2913 17.9999C16.9283 17.9927 16.6378 17.6964 16.6378 17.3333C16.6378 17.2088 16.599 16.9855 16.4876 16.6619C16.3796 16.3485 16.2165 15.978 16.0015 15.572C15.5714 14.7597 14.9518 13.8391 14.207 12.9928C13.4603 12.1445 12.6071 11.3927 11.716 10.8938C11.0208 10.5045 10.3252 10.2811 9.6474 10.2644V13.6296C9.6474 13.8844 9.50221 14.1169 9.2733 14.2287C9.04438 14.3405 8.77176 14.312 8.57084 14.1554L0.257105 7.67392C0.095068 7.5476 0.000331879 7.35361 0.000331879 7.14815C0.000331879 6.94269 0.095068 6.74871 0.257105 6.62239L8.57084 0.140905Z" fill="currentColor"/>
                                    </svg>
                                </a>
                                <a href="" class="w-5 h-5 flex items-center justify-center group">
                                    <svg class="text-indigo-600 group-hover:text-indigo-800 transition-all duration-700 ease-in-out" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path d="M1.62629 2.43257C3.64001 0.448687 6.82082 0.311339 8.99614 2.02053C11.1723 0.311339 14.3589 0.448687 16.3726 2.43257L16.3734 2.43334C18.5412 4.57611 18.5412 8.04382 16.3804 10.1867L16.378 10.1891L9.46309 16.9764C9.20352 17.2312 8.78765 17.2309 8.52844 16.9758L1.62629 10.1821C-0.542748 8.04516 -0.542748 4.56947 1.62629 2.43257Z" fill="currentColor"/>
                                    </svg>
                                </a>
                                <a href="" class="w-5 h-5 flex items-center justify-center group">
                                    <svg class="text-indigo-600 group-hover:text-indigo-800 transition-all duration-700 ease-in-out" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5835 3.16634V3.83301H1.50016C1.13197 3.83301 0.833496 4.13148 0.833496 4.49967C0.833496 4.86786 1.13197 5.16634 1.50016 5.16634L2.33356 5.16642L2.33356 11.5482C2.33354 12.6855 2.33352 13.6065 2.43103 14.3318C2.5325 15.0865 2.75042 15.7283 3.26105 16.2389C3.77168 16.7495 4.4135 16.9675 5.16821 17.0689C5.89348 17.1665 6.81445 17.1664 7.9518 17.1664H10.0486C11.186 17.1664 12.107 17.1665 12.8322 17.0689C13.5869 16.9675 14.2288 16.7495 14.7394 16.2389C15.25 15.7283 15.4679 15.0865 15.5694 14.3318C15.6669 13.6065 15.6669 12.6856 15.6669 11.5483V5.16642L16.5002 5.16634C16.8684 5.16634 17.1668 4.86786 17.1668 4.49967C17.1668 4.13148 16.8684 3.83301 16.5002 3.83301H13.4168V3.16634C13.4168 1.87768 12.3722 0.833008 11.0835 0.833008H6.91683C5.62817 0.833008 4.5835 1.87768 4.5835 3.16634ZM6.91683 2.16634C6.36455 2.16634 5.91683 2.61406 5.91683 3.16634V3.83301H12.0835V3.16634C12.0835 2.61406 11.6358 2.16634 11.0835 2.16634H6.91683ZM7.50014 7.58303C7.86833 7.58303 8.16681 7.8815 8.16681 8.24969L8.16681 12.7497C8.16681 13.1179 7.86833 13.4164 7.50014 13.4164C7.13195 13.4164 6.83348 13.1179 6.83348 12.7497L6.83348 8.24969C6.83348 7.8815 7.13195 7.58303 7.50014 7.58303ZM11.1669 8.24969C11.1669 7.8815 10.8684 7.58303 10.5002 7.58303C10.132 7.58303 9.83356 7.8815 9.83356 8.24969V12.7497C9.83356 13.1179 10.132 13.4164 10.5002 13.4164C10.8684 13.4164 11.1669 13.1179 11.1669 12.7497L11.1669 8.24969Z" fill="currentColor"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="w-full pb-6 border-b border-gray-300 justify-start items-start gap-2.5 inline-flex">
                        <img class="w-10 h-10 rounded-full object-cover" src="https://pagedone.io/asset/uploads/1710238051.png" alt="Emma Davis image" />
                        <div class="w-full flex-col justify-start items-start gap-3.5 inline-flex">
                            <div class="w-full justify-start items-start flex-col flex gap-1">
                                <div class="w-full justify-between items-start gap-1 inline-flex">
                                    <h5 class="text-gray-900 text-sm font-semibold leading-snug">Emma Davis</h5>
                                    <span class="text-right text-gray-500 text-xs font-normal leading-5">2 Day ago</span>
                                </div>
                                <h5 class="text-gray-800 text-sm font-normal leading-snug">Rutrum enim commodo est tristique vitae ut porta euismod cras. Id quis at donec duis scelerisque. Diam magnis adipiscing tellus sapien diam neque porta nullam lectus. Velit ornare odio ornare congue eleifend turpis nulla diam. Pharetra pellentesque ultrices sollicitudin phasellus suspendisse.</h5>
                            </div>
                            <div class="justify-start items-start gap-5 inline-flex">
                                <a href="" class="w-5 h-5 flex items-center justify-center group">
                                    <svg class="text-indigo-600 group-hover:text-indigo-800 transition-all duration-700 ease-in-out" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path d="M8.57084 0.140905C8.77176 -0.0157322 9.04438 -0.0441704 9.2733 0.067628C9.50221 0.179426 9.6474 0.411912 9.6474 0.666672V4.007C11.5347 4.11302 13.0359 4.67225 14.2134 5.55105C15.5204 6.52639 16.3797 7.85847 16.9418 9.28015C18.0571 12.1006 18.0478 15.3937 17.9706 17.3595C17.9563 17.7223 17.6544 18.007 17.2913 17.9999C16.9283 17.9927 16.6378 17.6964 16.6378 17.3333C16.6378 17.2088 16.599 16.9855 16.4876 16.6619C16.3796 16.3485 16.2165 15.978 16.0015 15.572C15.5714 14.7597 14.9518 13.8391 14.207 12.9928C13.4603 12.1445 12.6071 11.3927 11.716 10.8938C11.0208 10.5045 10.3252 10.2811 9.6474 10.2644V13.6296C9.6474 13.8844 9.50221 14.1169 9.2733 14.2287C9.04438 14.3405 8.77176 14.312 8.57084 14.1554L0.257105 7.67392C0.095068 7.5476 0.000331879 7.35361 0.000331879 7.14815C0.000331879 6.94269 0.095068 6.74871 0.257105 6.62239L8.57084 0.140905Z" fill="currentColor"/>
                                    </svg>
                                </a>
                                <a href="" class="w-5 h-5 flex items-center justify-center group">
                                    <svg class="text-indigo-600 group-hover:text-indigo-800 transition-all duration-700 ease-in-out" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path d="M1.62629 2.43257C3.64001 0.448687 6.82082 0.311339 8.99614 2.02053C11.1723 0.311339 14.3589 0.448687 16.3726 2.43257L16.3734 2.43334C18.5412 4.57611 18.5412 8.04382 16.3804 10.1867L16.378 10.1891L9.46309 16.9764C9.20352 17.2312 8.78765 17.2309 8.52844 16.9758L1.62629 10.1821C-0.542748 8.04516 -0.542748 4.56947 1.62629 2.43257Z" fill="currentColor"/>
                                    </svg>
                                </a>
                                <a href="" class="w-5 h-5 flex items-center justify-center group">
                                    <svg class="text-indigo-600 group-hover:text-indigo-800 transition-all duration-700 ease-in-out" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5835 3.16634V3.83301H1.50016C1.13197 3.83301 0.833496 4.13148 0.833496 4.49967C0.833496 4.86786 1.13197 5.16634 1.50016 5.16634L2.33356 5.16642L2.33356 11.5482C2.33354 12.6855 2.33352 13.6065 2.43103 14.3318C2.5325 15.0865 2.75042 15.7283 3.26105 16.2389C3.77168 16.7495 4.4135 16.9675 5.16821 17.0689C5.89348 17.1665 6.81445 17.1664 7.9518 17.1664H10.0486C11.186 17.1664 12.107 17.1665 12.8322 17.0689C13.5869 16.9675 14.2288 16.7495 14.7394 16.2389C15.25 15.7283 15.4679 15.0865 15.5694 14.3318C15.6669 13.6065 15.6669 12.6856 15.6669 11.5483V5.16642L16.5002 5.16634C16.8684 5.16634 17.1668 4.86786 17.1668 4.49967C17.1668 4.13148 16.8684 3.83301 16.5002 3.83301H13.4168V3.16634C13.4168 1.87768 12.3722 0.833008 11.0835 0.833008H6.91683C5.62817 0.833008 4.5835 1.87768 4.5835 3.16634ZM6.91683 2.16634C6.36455 2.16634 5.91683 2.61406 5.91683 3.16634V3.83301H12.0835V3.16634C12.0835 2.61406 11.6358 2.16634 11.0835 2.16634H6.91683ZM7.50014 7.58303C7.86833 7.58303 8.16681 7.8815 8.16681 8.24969L8.16681 12.7497C8.16681 13.1179 7.86833 13.4164 7.50014 13.4164C7.13195 13.4164 6.83348 13.1179 6.83348 12.7497L6.83348 8.24969C6.83348 7.8815 7.13195 7.58303 7.50014 7.58303ZM11.1669 8.24969C11.1669 7.8815 10.8684 7.58303 10.5002 7.58303C10.132 7.58303 9.83356 7.8815 9.83356 8.24969V12.7497C9.83356 13.1179 10.132 13.4164 10.5002 13.4164C10.8684 13.4164 11.1669 13.1179 11.1669 12.7497L11.1669 8.24969Z" fill="currentColor"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="w-full pb-6 border-b border-gray-300 justify-start items-start gap-2.5 inline-flex">
                        <img class="w-10 h-10 rounded-full object-cover" src="https://pagedone.io/asset/uploads/1710225753.png" alt="James Miller image" />
                        <div class="w-full flex-col justify-start items-start gap-3.5 inline-flex">
                            <div class="w-full justify-start items-start flex-col flex gap-1">
                                <div class="w-full justify-between items-start gap-1 inline-flex">
                                    <h5 class="text-gray-900 text-sm font-semibold leading-snug">James Miller</h5>
                                    <span class="text-right text-gray-500 text-xs font-normal leading-5">5 Day ago</span>
                                </div>
                                <h5 class="text-gray-800 text-sm font-normal leading-snug">Lectus quis ac quis lectus elit. Dolor tortor eu tristique malesuada. Quis dictumst nulla vitae velit nisi. Volutpat enim turpis dignissim.</h5>
                            </div>
                            <div class="justify-start items-start gap-5 inline-flex">
                                <a href="" class="w-5 h-5 flex items-center justify-center group">
                                    <svg class="text-indigo-600 group-hover:text-indigo-800 transition-all duration-700 ease-in-out" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path d="M8.57084 0.140905C8.77176 -0.0157322 9.04438 -0.0441704 9.2733 0.067628C9.50221 0.179426 9.6474 0.411912 9.6474 0.666672V4.007C11.5347 4.11302 13.0359 4.67225 14.2134 5.55105C15.5204 6.52639 16.3797 7.85847 16.9418 9.28015C18.0571 12.1006 18.0478 15.3937 17.9706 17.3595C17.9563 17.7223 17.6544 18.007 17.2913 17.9999C16.9283 17.9927 16.6378 17.6964 16.6378 17.3333C16.6378 17.2088 16.599 16.9855 16.4876 16.6619C16.3796 16.3485 16.2165 15.978 16.0015 15.572C15.5714 14.7597 14.9518 13.8391 14.207 12.9928C13.4603 12.1445 12.6071 11.3927 11.716 10.8938C11.0208 10.5045 10.3252 10.2811 9.6474 10.2644V13.6296C9.6474 13.8844 9.50221 14.1169 9.2733 14.2287C9.04438 14.3405 8.77176 14.312 8.57084 14.1554L0.257105 7.67392C0.095068 7.5476 0.000331879 7.35361 0.000331879 7.14815C0.000331879 6.94269 0.095068 6.74871 0.257105 6.62239L8.57084 0.140905Z" fill="currentColor"/>
                                    </svg>
                                </a>
                                <a href="" class="w-5 h-5 flex items-center justify-center group">
                                    <svg class="text-indigo-600 group-hover:text-indigo-800 transition-all duration-700 ease-in-out" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path d="M1.62629 2.43257C3.64001 0.448687 6.82082 0.311339 8.99614 2.02053C11.1723 0.311339 14.3589 0.448687 16.3726 2.43257L16.3734 2.43334C18.5412 4.57611 18.5412 8.04382 16.3804 10.1867L16.378 10.1891L9.46309 16.9764C9.20352 17.2312 8.78765 17.2309 8.52844 16.9758L1.62629 10.1821C-0.542748 8.04516 -0.542748 4.56947 1.62629 2.43257Z" fill="currentColor"/>
                                    </svg>
                                </a>
                                <a href="" class="w-5 h-5 flex items-center justify-center group">
                                    <svg class="text-indigo-600 group-hover:text-indigo-800 transition-all duration-700 ease-in-out" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5835 3.16634V3.83301H1.50016C1.13197 3.83301 0.833496 4.13148 0.833496 4.49967C0.833496 4.86786 1.13197 5.16634 1.50016 5.16634L2.33356 5.16642L2.33356 11.5482C2.33354 12.6855 2.33352 13.6065 2.43103 14.3318C2.5325 15.0865 2.75042 15.7283 3.26105 16.2389C3.77168 16.7495 4.4135 16.9675 5.16821 17.0689C5.89348 17.1665 6.81445 17.1664 7.9518 17.1664H10.0486C11.186 17.1664 12.107 17.1665 12.8322 17.0689C13.5869 16.9675 14.2288 16.7495 14.7394 16.2389C15.25 15.7283 15.4679 15.0865 15.5694 14.3318C15.6669 13.6065 15.6669 12.6856 15.6669 11.5483V5.16642L16.5002 5.16634C16.8684 5.16634 17.1668 4.86786 17.1668 4.49967C17.1668 4.13148 16.8684 3.83301 16.5002 3.83301H13.4168V3.16634C13.4168 1.87768 12.3722 0.833008 11.0835 0.833008H6.91683C5.62817 0.833008 4.5835 1.87768 4.5835 3.16634ZM6.91683 2.16634C6.36455 2.16634 5.91683 2.61406 5.91683 3.16634V3.83301H12.0835V3.16634C12.0835 2.61406 11.6358 2.16634 11.0835 2.16634H6.91683ZM7.50014 7.58303C7.86833 7.58303 8.16681 7.8815 8.16681 8.24969L8.16681 12.7497C8.16681 13.1179 7.86833 13.4164 7.50014 13.4164C7.13195 13.4164 6.83348 13.1179 6.83348 12.7497L6.83348 8.24969C6.83348 7.8815 7.13195 7.58303 7.50014 7.58303ZM11.1669 8.24969C11.1669 7.8815 10.8684 7.58303 10.5002 7.58303C10.132 7.58303 9.83356 7.8815 9.83356 8.24969V12.7497C9.83356 13.1179 10.132 13.4164 10.5002 13.4164C10.8684 13.4164 11.1669 13.1179 11.1669 12.7497L11.1669 8.24969Z" fill="currentColor"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                   
                </div>
            </div>
        </div>
    </section>

HTML Copy

Nested comment section

Use following example of comment block to show a list of multi level comments and form field to post a comment and display filter to show recent comments.

Preview
Code

Figma File

Simple Comment block

Use this simple comment block to show a list of comments with like and share buttons.

Preview
Code

Figma File

Tailwind CSS Comment list with Form

Use following example of comment block with form field to post comment with reactions and show list of comments below it.

Preview
Code

Figma File

Comment block with text editor

This example of Tailwind Comment block shows list of comments with gradient CTA Buttons and additionally it display text editor where cusotmer post a comment and change styles of text.

Preview
Code

Figma File

Comment section with reply field

Use following example of Tailwind CSS Comment Box to show a input field inside comment perticular comment area to post reply on older comments.

Preview
Code

Figma File

Tailwind comment list with user images

Use following example of comment block to show a list of comments with user images and like, share and reply buttons.

Preview
Code

Figma File

comment list with text editor

This exmaple of Tailwind Comment Section show a comment list and text editor to change style of comment text.

Preview
Code

Figma File

Comment Form tailwind

Use following example of Tailwind Comment Box to show comment form with all required field and CTA button below comment list.

Preview
Code

Figma File