Question & Answer

questions and answers

This tailwind example is contributed by Anonymous, on 09-Aug-2023. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 9.3k 16

Fork Fullscreen

<div class="w-full md:w-2/3 mx-auto p-5 bg-white rounded-lg shadow">
  <div class="flex items-center justify-between">
    <div class="w-2/3">
      <h2 class="section-heading text-bold">
        Questions and Answer
      </h2>
    </div>

<p class="ml-4 md:ml-6 text-bold">
          Can we have extra parking space for this unit?
        </p>
      </div>

<p class="ml-4 md:ml-6 text-bold text-gray-800">
          Yes you can get extra parking space but you have to pay extra monthly.
        </p>
      </div>

<span class="text-sm text-gray-800">
              10 upvotes
          </span>
        </div>

<span class="text-sm text-gray-800">
              Jason
              <span class="hidden md:inline-block">
                  - 2 days ago
              </span>
          </span>
        </div>
      </div>
    </div>
    <div>
      <div class="flex items-start">
        <div>
          <span class="inline-flex justify-center items-center w-6 h-6 rounded bg-green-500 text-white font-medium text-sm">
              Q
          </span>
        </div>

<p class="ml-4 md:ml-6 text-bold">
          Can we have extra parking space for this unit?
        </p>
      </div>

<p class="ml-4 md:ml-6 text-gray-800">
          Yes you can get extra parking space but you have to pay extra monthly.
        </p>
      </div>

<span class="text-sm text-gray-800">
              10 upvotes
          </span>
        </div>

<p class="ml-4 md:ml-6">
          Can we have extra parking space for this unit?
        </p>
      </div>

<p class="ml-4 md:ml-6 text-gray-800">
          Yes you can get extra parking space but you have to pay extra monthly.
        </p>
      </div>

<span class="text-sm text-gray-800">
              10 upvotes
          </span>
        </div>

<span class="text-sm text-gray-800">
              Jason
              <span class="hidden md:inline-block">
                  - 2 days ago
              </span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Collapsible content

Rafferty Kim

3 years ago

14.7k
News feed

Bunny

3 years ago

14.2k
Show user details

Lucas Martinez

3 years ago

26.3k
Chat template
fullscreen chat template suitable for mobile devices

Manon Daniel

3 years ago

18.2k
Fancy underline

Simon Scheffer

3 years ago

13.2k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22.1k
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
Privacy policy page template

Sameer Sultana

3 years ago

19.8k
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

nejaa badr

1 year ago

4k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Muhammad Rizqi Juniyanto

2 years ago

3.9k
tab1
table

Anonymous

3 weeks ago

15
Services

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.6k