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.2k 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

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

Ayman Reifoun

1 year ago

1.3k
Simple login form

Sathishkumar Nallusamy

3 months ago

669
Login template

Gabriel Urbano

2 years ago

7k
form
form

Rockstar

2 months ago

249
Tailwind Animated Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

7 months ago

1k
Contact us form
Contact us form

Geoffrey Callaghan

2 years ago

7.5k
Checkout form

Sienna

3 years ago

15k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Ameth Galarcio

2 years ago

3.4k
Forgot password form
Useful form for sending password reset link

Anonymous

1 year ago

2.2k
Customer Comments

Lautaro Gómez

2 years ago

3.1k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Anja Müller

3 years ago

8.6k