Home
Shariar Hasan
Simple Comment Section Component

Simple Comment Section Component

This is a Simple Comment Section Component with full responsiveness and dark mode supported

This tailwind example is contributed by Shariar Hasan, on 05-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Comment Section

Author Shariar Hasan

2.4k

Fork Fullscreen

<main class="w-screen h-screen flex justify-center items-center dark:bg-gray-900">
  <div class="max-w-7xl dark:bg-gray-950 dark:text-white">
    <form class=" w-full p-4 rounded shadow-md" action="/submit-comment" method="post">
      <h2 class="text-xl mb-4 tracking-wider font-lighter text-gray-900 dark:text-gray-200">Leave a Comment</h2>
      <p class="text-gray-600 mb-4">Your email address will not be published. Required fields are marked *</p>

<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
        <div class="mb-4 col-span-1 md:col-span-3">
          <textarea
        id="comment"
        name="comment"
        class="w-full px-3 py-2 dark:bg-gray-900 rounded-sm border dark:border-none border-gray-300 focus:outline-none border-solid focus:border-dashed resize-none"
        placeholder="Type Comment...*"
        rows="5"

required
      ></textarea>
        </div>

<div class="mb-4">
          <input
        type="text"
        id="name"
        name="name"
        class="w-full px-3 py-2 dark:bg-gray-900 rounded-sm border dark:border-none border-gray-300 focus:outline-none border-solid focus:border-dashed"
        placeholder="Name*"
        required
      />
        </div>
        <div class="mb-4">
          <input
        type="email"
        id="email"
        name="email"
        class="w-full px-3 py-2 dark:bg-gray-900 rounded-sm border dark:border-none border-gray-300 focus:outline-none border-solid focus:border-dashed"
        placeholder="Email*"
        required
      />
        </div>
        <div class="mb-4">
          <input
        type="text"
        id="website"
        name="website"
        class="w-full px-3 py-2 dark:bg-gray-900 rounded-sm border dark:border-none border-gray-300 focus:outline-none border-solid focus:border-dashed"
        placeholder="Website"
      />
        </div>
      </div>
      <div class="flex justify-end">
        <button
        type="submit"
        class="py-4 px-6 bg-blue-950 text-white rounded-sm hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-800"
      >
        Post Comment →
      </button>
      </div>
    </form>
  </div>
</main>

Related Examples

Comment section
Minimal comment section for your project

Author:
Prajwal Hallale

2 years ago

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

Author:
Prajwal Hallale

3 years ago

10.3k
Comment section

Author:
Manuela Bianka

3 years ago

11.3k
Comment card

Author:
Simon Scheffer

2 years ago

10.4k
Customer Comments

Author:
Lautaro Gómez

1 year ago

2.4k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

6 months ago

1.5k
Whatsapp like chat design

Author:
Simon Scheffer

2 years ago

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

Author:
Prajwal Hallale

3 years ago

14.3k
Comments section with form

Author:
Orion.c

2 years ago

10.2k
Post Detail
Post detail with form

Author:
Sedat Kumcu

1 year ago

1.6k
Simple comment box

Author:
Lukas Müller

2 years ago

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

Author:
Prajwal Hallale

2 years ago

7.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components