<div class="m-8 grid grid-cols-12">
<div class="flex rounded-xl bg-white p-4 col-span-12">
<div class="mx-2 flex h-16 w-16 items-center justify-center overflow-hidden rounded-full flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/8.jpg" />
</div>
<div class="ml-4 w-full">
<div class="flex w-full items-center justify-between">
<h2 class="text-lg font-medium">Maria</h2>
<p>19 hours ago</p>
</div>
<div class="mt-4">
<p>It's such a bright sunny day</p>
<div class="mt-4 space-x-2">
<button class="px-4 py-2 rounded-xl bg-zinc-400 text-white font-medium">Reply</button>
<button class="px-4 py-2 rounded-xl bg-sky-400 text-white font-medium">Edit</button>
<button class="px-4 py-2 rounded-xl bg-red-400 text-white font-delete">Edit</button>
</div>
</div>
</div>
</div>
<div class="col-span-10 col-start-3 mt-4 space-y-4">
<div class="flex rounded-xl bg-white p-4">
<div class="mx-2 flex h-16 w-16 items-center justify-center overflow-hidden rounded-full flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/9.jpg" />
</div>
<div class="ml-4 w-full">
<div class="flex w-full items-center justify-between">
<h2 class="text-lg font-medium">Jasmine</h2>
<p>12 hours ago</p>
</div>
<div class="mt-4">
<p>Do you plan to go anywhere later?</p>
<div class="mt-4 space-x-2">
<button class="px-4 py-2 rounded-xl bg-zinc-400 text-white font-medium">Reply</button>
<button class="px-4 py-2 rounded-xl bg-sky-400 text-white font-medium">Edit</button>
<button class="px-4 py-2 rounded-xl bg-red-400 text-white font-delete">Edit</button>
</div>
</div>
</div>
</div>
<div class="flex rounded-xl bg-white p-4">
<div class="mx-2 flex h-16 w-16 items-center justify-center overflow-hidden rounded-full flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/7.jpg" />
</div>
<div class="ml-4 w-full">
<div class="flex w-full items-center justify-between">
<h2 class="text-lg font-medium">Samantha</h2>
<p>4 hours ago</p>
</div>
<div class="mt-4">
<p>Hey what's up? What are you guys doing now?</p>
<div class="mt-4 space-x-2">
<button class="px-4 py-2 rounded-xl bg-zinc-400 text-white font-medium">Reply</button>
<button class="px-4 py-2 rounded-xl bg-sky-400 text-white font-medium">Edit</button>
<button class="px-4 py-2 rounded-xl bg-red-400 text-white font-delete">Edit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Tailwind CSS Simple Comment Component
[email protected]
733 views
How to install and add to your project?
Step 1: Include Scripts and Styling CDN inside the head tag
<script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css"> <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
Step 2: Copy the Tailwind CSS Simple Comment Component component code above as you need it
Step 3: Preview the component in your browser 🚀
Step 4: For production release make sure to use the official Tailwind CSS Installation
You are done 🎉
Credits or Attribution
If you enjoy using our components, please do give us (PostSrc) credit in your project footer section or about page. Copy the HTML below for attribution.
<a href="https://postsrc.com/components" target="_blank" rel="noopener" title="PostSrc Components - Collection of Tailwind CSS components for everyone to use"><img style="width: auto; height: 46px;" src="https://postsrc.com/img/attr.png" alt="PostSrc logo"></a>
