Home
Prajwal Hallale
User Comments Section

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 CSS v3. It is responsive.

Comment Section

Author Prajwal Hallale

7.4k

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