Post Detail

Post detail with form

This tailwind example is contributed by Sedat Kumcu, on 31-Oct-2024. Component is made with Tailwind v3.4. It is responsive.

Form Comment Section

Author Sedat Kumcu

Tailwind v3.4 2.3k 8

Fork Fullscreen

<div class="container mx-auto p-6">
  
  <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-6">
    <img class="w-full h-72 object-cover" src="post-photo.jpg" alt="Post Fotoğrafı">
    <div class="p-6">
      <h1 class="text-3xl font-bold mb-4">Post Başlığı</h1>
      <p class="text-gray-600 text-lg mb-4">Post summary... Lorem ipsum dolor sit amet.</p>
      <div class="text-sm text-gray-500 flex justify-between items-center mb-4">
        <span>Tarih: 01/01/2024</span>
        <span>Ülke: Türkiye</span>
      </div>
      <div class="flex items-center space-x-4 mb-6">
        <img class="w-10 h-10 rounded-full" src="user-profile.jpg" alt="User Profile">
        <div>
          <p class="font-medium text-gray-900">Kullanıcı Adı</p>
          <p class="text-sm text-gray-500">Yorum: 5, Okunma: 123</p>
        </div>
      </div>
    </div>
  </div>

<div class="bg-white shadow-lg rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-4">Yorumlar</h2>
    
    <div class="space-y-4 mb-6">
      
      <div class="p-4 bg-gray-100 rounded-lg">
        <p class="text-gray-700">Bu çalışma harika görünüyor!</p>
        <div class="flex justify-between items-center text-sm text-gray-500 mt-2">
          <span>Yazan: Kullanıcı Adı</span>
          <span>Tarih: 02/01/2024</span>
        </div>
      </div>
      
    </div>
    
    <form class="space-y-4">
      <textarea class="w-full p-4 text-gray-700 border border-gray-300 rounded-lg" placeholder="Yorumunuzu yazın..."></textarea>
      <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">Gönder</button>
    </form>
  </div>
</div>

Related Examples

Comment form

Sophia Baker

3 years ago

13.1k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
Sign up form

Rajesh Maheshwari

1 year ago

1.8k
progress-bar with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.7k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Geoffrey Callaghan

2 years ago

6.9k
Upload file input field

Gopi Yadav

3 years ago

15.9k
Login form

ariaw

1 year ago

1.4k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Muhammad Umair Arshad

1 year ago

1.2k
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

3k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Nicole Shalom

1 year ago

1.8k
Contact us form
Contact us form

Geoffrey Callaghan

2 years ago

7.6k
form Événement
form Événement

Omer fils ELENGA

7 months ago

409