User Comments Section

Display users' comments beautifully. The component also has a form for commenting.

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

Comment Section

Author Prajwal Hallale

Tailwind v3.4 7.6k 4

Fork Fullscreen

<section class="w-full rounded-lg border-2 border-purple-600 p-4 my-8 mx-auto max-w-xl">
    <h3 class="font-os text-lg font-bold">Comments</h3>

<div class="flex mt-4">
        <div class="w-14 h-14 rounded-full bg-purple-400/50 flex-shrink-0 flex items-center justify-center">
            <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/43.jpg"
                        alt="">
        </div>

<div class="ml-3">
            <div class="font-medium text-purple-800">John Doe</div>
            <div class="text-gray-600">Posted on 2023-10-02 14:30</div>
            <div class="mt-2 text-purple-800">This is a sample comment. Lorem ipsum dolor sit amet, consectetur
                adipiscing elit.
            </div>
        </div>
    </div>

<div class="flex mt-4">
        <div class="w-14 h-14 rounded-full bg-purple-400/50 flex-shrink-0 flex items-center justify-center">
            <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/43.jpg"
                        alt="">
        </div>
        <div class="ml-3">
            <div class="font-medium text-purple-800">Jane Smith</div>
            <div class="text-gray-600">Posted on 2023-10-02 15:15</div>
            <div class="mt-2 text-purple-800">Another sample comment. Sed quis velit auctor, bibendum dolor in,
                accumsan tellus.
            </div>
        </div>
    </div>

<form class="mt-4">
        <div class="mb-4">
            <label for="name" class="block text-purple-800 font-medium">Name</label>
            <input type="text" id="name" name="name"
                        class="border-2 border-purple-600 p-2 w-full rounded" required>
        </div>

<div class="mb-4">
            <label for="comment" class="block text-purple-800 font-medium">Comment</label>
            <textarea id="comment" name="comment" class="border-2 border-purple-600 p-2 w-full rounded" required></textarea>
        </div>

<button type="submit"
                    class="bg-purple-700 text-white font-medium py-2 px-4 rounded hover:bg-purple-600">Post
                    Comment
        </button>
    </form>
</section>

Related Examples

Comment section
Minimal comment section for your project

Prajwal Hallale

3 years ago

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

Prajwal Hallale

4 years ago

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

Prajwal Hallale

4 years ago

10.4k
Comments section with form

Orion.c

3 years ago

11.5k
Comment card

Simon Scheffer

3 years ago

11.1k
OMERLINK MENU PAGE
OMERLINK MENU PAGE

Omer fils ELENGA

9 months ago

923
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.9k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

630
omerlinkStream
omerlinkStream

Omer fils ELENGA

9 months ago

1.3k
Simple comment box

Lukas Müller

3 years ago

12.2k
FUTURIC.
FUTURIC.

Omer fils ELENGA

7 months ago

630
Whatsapp like chat design

Simon Scheffer

3 years ago

14.3k