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

1.8k

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

1 year ago

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

3 weeks ago

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

Author:
Prajwal Hallale

2 years ago

14.1k
Comment form

Author:
Sophia Baker

2 years ago

11.8k
Comment section

Author:
Manuela Bianka

2 years ago

10.7k
Comment card

Author:
Simon Scheffer

2 years ago

9.9k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

7 months ago

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

Author:
Prajwal Hallale

2 years ago

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

Author:
Prajwal Hallale

1 year ago

7.4k
Whatsapp like chat design

Author:
Simon Scheffer

2 years ago

12.5k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

3 months ago

534
Post Detail
Post detail with form

Author:
Sedat Kumcu

7 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components