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

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

4.9k
bardui.com badge

Author:
Muhammad Imran

10 months ago

1.4k
File Upload

Author:
Rajesh Maheshwari

5 months ago

642
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

7 months ago

652
Colored checkboxes
use custom accent color according to your design

Author:
Pixel Perfect

1 year ago

4.5k
Minimalistic Modal with Native Functionality
This modal is built using HTML and Tailwind CSS without requiring JavaScript for basic functionality. It leverages the native <dialog> element, allowing users to open the modal by clicking a button and close it by clicking the ❌ button or clicking outside the modal. The design is clean and responsive, ensuring a smooth user experience with minimal code.

Author:
SHARIFUL ISLAM

5 months ago

1.3k
Login Form with Icon

Author:
Prashant

2 years ago

16.9k
File input

Author:
Anonymous

1 year ago

6.9k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

2 months ago

243
GALLERY

Author:
ORGIN_DREAMS

2 months ago

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

Author:
Ameth Galarcio

1 year ago

3.7k
File upload input box

Author:
Mohit Prajapati

2 years ago

14k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components