In this section we will create tailwind comment box ui, tailwind comment form, comment box with tailwind form plugin, tailwind v3 comment box example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
Simple tailwind comment box.
<div class="max-w-lg shadow-md">
<form action="" class="w-full p-4">
<div class="mb-2">
<label for="comment" class="text-lg text-gray-600">Add a comment</label>
<textarea class="w-full h-20 p-2 border rounded focus:outline-none focus:ring-gray-300 focus:ring-1"
name="comment" placeholder=""></textarea>
</div>
<button class="px-3 py-2 text-sm text-blue-100 bg-blue-600 rounded">Comment</button>
</form>
</div>
Comment box using tailwind v3 shadow color.
<div class="max-w-lg rounded-lg shadow-md shadow-blue-600/50">
<form action="" class="w-full p-4">
<div class="mb-2">
<label for="comment" class="text-lg text-gray-600">Add a comment</label>
<textarea
class="w-full h-20 p-2 border rounded focus:outline-none focus:ring-gray-300 focus:ring-1"
name="comment"
placeholder=""></textarea>
</div>
<div>
<button class="px-3 py-2 text-sm text-blue-100 bg-blue-600 rounded">
Comment
</button>
<button
class="px-3 py-2 text-sm text-blue-600 border border-blue-500 rounded">
Cancel
</button>
</div>
</form>
</div>
tailwind v3 comment box
Example 2
Comment box with tailwind css form plugin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind comment box with tailwindcss form plugin </title>
<script src="https://cdn.tailwindcss.com/?plugins=forms"></script>
</head>
<body>
<div class="max-w-lg shadow-md">
<form action="" class="w-full p-4">
<label class="block mb-2">
<span class="text-gray-600">Add a comment</span>
<textarea class="block w-full mt-1 rounded" rows="3"></textarea>
</label>
<button class="px-3 py-2 text-sm text-blue-100 bg-blue-600 rounded">Comment</button>
</form>
</div>
</body>
</html>
tailwind form comment
Example 3
Build a responsive comments box with lists of users comments using Tailwind CSS.
<div class="lg:max-w-md w-full mx-auto my-8 p-6 bg-white shadow-md rounded-md">
<h2 class="text-xl font-semibold mb-4">Comments</h2>
<!-- Single Comment -->
<div class="flex items-start mb-4">
<img src="https://source.unsplash.com/50x50/?avatar" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
<div>
<p class="text-gray-800 font-semibold">John Doe</p>
<p class="text-gray-600">look nice ...</p>
</div>
</div>
<!-- Another Comment -->
<div class="flex items-start mb-4">
<img src="https://source.unsplash.com/50x50/?avatar" alt="Another User Avatar"
class="w-8 h-8 rounded-full mr-2" />
<div>
<p class="text-gray-800 font-semibold">Jane Smith</p>
<p class="text-gray-600">good...</p>
</div>
</div>
<!-- Add your comment form here -->
<form class="flex items-start mb-4">
<img src="https://source.unsplash.com/50x50/?avatar" alt="Your Avatar" class="w-8 h-8 rounded-full mr-2" />
<textarea class="w-full p-2 border rounded-md focus:outline-none focus:border-blue-500"
placeholder="Add your comment..."></textarea>
<button type="submit" class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md">
Post
</button>
</form>
</div>
tailwind responsive comments box example
Example 4
Design a comment section with reply functionality using Tailwind CSS.
<div class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="lg:max-w-lg w-full bg-white p-4 rounded-lg shadow-md">
<!-- Main Comment -->
<div class="flex space-x-4">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/40" alt="User Avatar" class="w-8 h-8 rounded-full">
</div>
<div>
<div class="text-gray-700 font-semibold">John Doe</div>
<p class="text-gray-600">Lorem ipsum dolor ....</p>
</div>
</div>
<!-- Replies -->
<div class="ml-12 mt-4 space-y-2">
<!-- Reply 1 -->
<div class="flex space-x-4">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/40" alt="User Avatar" class="w-8 h-8 rounded-full">
</div>
<div>
<div class="text-gray-700 font-semibold">Jane Doe</div>
<p class="text-gray-600">I agree! ....</p>
</div>
</div>
<!-- Reply 2 -->
<div class="flex space-x-4">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/40" alt="User Avatar" class="w-8 h-8 rounded-full">
</div>
<div>
<div class="text-gray-700 font-semibold">Bob Smith</div>
<p class="text-gray-600">Thanks for sharing your thoughts!</p>
</div>
</div>
</div>
<!-- Add Reply Form -->
<div class="mt-4">
<form action="#" method="POST">
<div class="flex space-x-4">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/40" alt="User Avatar" class="w-8 h-8 rounded-full">
</div>
<div class="flex-1">
<input type="text" placeholder="Add a reply..."
class="w-full border-b border-gray-300 focus:outline-none focus:border-blue-500">
</div>
<button type="submit"
class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">Reply</button>
</div>
</form>
</div>
</div>
</div>
tailwind comment section with reply
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
