Home
Simon Scheffer
Comment card

Comment card

This tailwind example is contributed by Simon Scheffer, on 27-Feb-2023. Component is made with Tailwind CSS v3.

10.8k

<div class="max-w-lg mx-auto border px-6 py-4 rounded-lg">
    <div class="flex items-center mb-6">
        <img src="https://randomuser.me/api/portraits/men/97.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
        <div>
            <div class="text-lg font-medium text-gray-800">John Doe</div>
            <div class="text-gray-500">2 hours ago</div>
        </div>
    </div>
    <p class="text-lg leading-relaxed mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem
        nulla. Donec consequat urna a tortor sagittis lobortis.</p>
    <div class="flex justify-between items-center">
        <div>
            <a href="#" class="text-gray-500 hover:text-gray-700 mr-4"><i class="far fa-thumbs-up"></i> Like</a>
            <a href="#" class="text-gray-500 hover:text-gray-700"><i class="far fa-comment-alt"></i> Reply</a>
        </div>
        <div class="flex items-center">
            <a href="#" class="text-gray-500 hover:text-gray-700 mr-4"><i class="far fa-flag"></i> Report</a>
            <a href="#" class="text-gray-500 hover:text-gray-700"><i class="far fa-share-square"></i> Share</a>
        </div>
    </div>
</div>

Related Examples

Comment section
Minimal comment section for your project

Author:
Prajwal Hallale

2 years ago

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

Author:
Prajwal Hallale

3 years ago

14.4k
Comments section with form

Author:
Orion.c

3 years ago

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

Author:
Prajwal Hallale

3 years ago

10.3k
Whatsapp like chat design

Author:
Simon Scheffer

3 years ago

13.8k
Simple comment box

Author:
Lukas Müller

3 years ago

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

Author:
Prajwal Hallale

2 years ago

7.6k
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/

Author:
Achraf Testq

5 days ago

139
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

3 months ago

180
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

3 months ago

576
FUTURIC.
FUTURIC.

Author:
Omer fils ELENGA

1 month ago

58
Customer Comments

Author:
Lautaro Gómez

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components