bardui.com feedback modal

feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

This tailwind example is contributed by Muhammad Imran, on 30-Sep-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Input Modal

Author Muhammad Imran

Tailwind v3.4 2.5k 10

Fork Fullscreen

body {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
</style>
<div class="flex min-h-screen items-center justify-center bg-black/30 p-4">
  <div class="w-full max-w-sm">
    <div class="relative rounded-2xl bg-white p-6 shadow">
      <div class="mb-4 flex items-center justify-between">
        <h2 class="text-xl font-semibold text-gray-900">Leave feedback</h2>
        <button class="absolute right-5 top-5 text-gray-400 hover:text-gray-600">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <p class="mb-4 text-center text-sm">We'd love to hear what went well or how we can improve the product experience.
      </p>
      <textarea class="mb-3 w-full rounded-lg border border-gray-200 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Your feedback..."></textarea>
      <div class="mb-4 flex justify-start gap-2">
        <button class="text-md rounded-lg border border-gray-200 px-2.5 py-1.5 hover:bg-gray-50">😞</button>
        <button class="text-md rounded-lg border border-gray-200 px-2.5 py-1.5 hover:bg-gray-50">😐</button>
        <button class="text-md rounded-lg border border-gray-200 px-2.5 py-1.5 hover:bg-gray-50">😊</button>
      </div>
      <button class="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-medium text-white transition duration-300 hover:bg-gray-800">Submit</button>
    </div>
  </div>
</div>

Related Examples

Incentives
tailwind css Incentives

Anonymous

2 years ago

5.9k
simple badge

Muhammad Imran

1 year ago

2.3k
File Upload

Rajesh Maheshwari

1 year ago

1.4k
Material 3 Text Fields [Light]
Text fields that conform to Google's Material 3 design guidelines. Can be used for single-line text fields as well as textareas.

Nick Girga

1 year ago

1.4k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

R Thapa

2 years ago

18.3k
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

zobaidul kaziex

2 years ago

3.6k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

ABDO-SY

1 year ago

1.2k
Yes / No radio input with reset button

Kris Showen

3 years ago

11k
Error popup modal

Odessa Young

3 years ago

17k
File upload input box

Mohit Prajapati

3 years ago

15.3k
File Upload
Image or file upload card

Khalid

2 years ago

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

Ayman Reifoun

1 year ago

1.3k