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

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.1k
bardui.com badge

Author:
Muhammad Imran

4 months ago

873
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

6 days ago

66
test1 اصلي

Author:
SHAHAD EIDAH ALHAERTHI

5 months ago

743
Modal with background overlay
Reduce the opacity of the page content to bring the focus to the modal.

Author:
Abigail

2 years ago

10.9k
File upload with icon

Author:
Fagundo67

2 years ago

16.2k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

2 years ago

13.8k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

1 year ago

7.3k
Maintenance mode

Author:
Maxim

1 year ago

3k
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

2 years ago

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

Author:
R Thapa

1 year ago

14.9k
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

9 months ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components