Home
Sedat Kumcu
Post Detail

Post Detail

Post detail with form

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

Form Comment Section

Author Sedat Kumcu

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

Author:
Sophia Baker

3 years ago

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

Author:
Ayman Reifoun

11 months ago

968
OMERLINK MENU PAGE
OMERLINK MENU PAGE

Author:
Omer fils ELENGA

2 months ago

41
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.8k
Input output form

Author:
Prajwal Hallale

3 years ago

7.8k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

4.3k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

11 months ago

1.1k
Sign up form
simple full-height register form

Author:
Lukas Müller

3 years ago

13.1k
Records Form - HPower
records survey form

Author:
Anonymous

1 year ago

1.3k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

3.1k
User registration form

Author:
Leon Bachmann

3 years ago

25.3k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

3 years ago

50.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components