<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>