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

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.2k
simple badge

Author:
Muhammad Imran

1 year ago

1.9k
File Upload

Author:
Rajesh Maheshwari

9 months ago

975
Stacked Checkboxes

Author:
kishan pc

1 year ago

3k
File upload input box

Author:
Mohit Prajapati

3 years ago

14.7k
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Author:
Indra

3 months ago

529
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Author:
Алла Телегина

10 months ago

832
Responsive modal popup

Author:
I.P. Leroy

2 years ago

14.3k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

7 months ago

759
flex row

Author:
Yanjun Lin

4 months ago

212
GALLERY

Author:
ORGIN_DREAMS

7 months ago

952
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

2 years ago

7.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components