Home
Muhammad Imran
bardui.com feedback modal

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 CSS v3. It is responsive. similar terms for this example are popup,dialog

Input Modal

Author Muhammad Imran

1.6k

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

Author:
Anonymous

1 year ago

5.1k
simple badge

Author:
Muhammad Imran

1 year ago

1.9k
File Upload

Author:
Rajesh Maheshwari

8 months ago

927
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

171
floting input

Author:
Md. Tofayel islam

1 year ago

2.7k
Confirmation model

Author:
Mr Robot

3 years ago

13k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

16.7k
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.4k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

9 months ago

2.3k
Range Slider

Author:
Alok

3 years ago

13.8k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

3.3k
Drag and drop image upload with image preview

Author:
Santos78

2 years ago

22.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components