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 v3.4. It is responsive. It supports dark mode.

Comment Section

Author Shariar Hasan

Tailwind v3.4 2.9k 8

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

Prajwal Hallale

3 years ago

18.3k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

9 months ago

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

Ayyamperumal S

1 year ago

2.9k
OMERLINK MENU PAGE
OMERLINK MENU PAGE

Omer fils ELENGA

9 months ago

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

Prajwal Hallale

3 years ago

7.6k
card section neon
card section neon

Omer fils ELENGA

8 months ago

1.3k
Comment form

Sophia Baker

3 years ago

13.1k
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

7 months ago

567
L'art de coder
L'art de coderL'art de coder

Omer fils ELENGA

7 months ago

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

Coastal UI

2 years ago

2.7k
Customer Comments

Lautaro Gómez

2 years ago

3.1k
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

7 months ago

542