Tailwind CSS Feedback Modal
A feedback modal for Tailwind CSS. Use it to collect suggestions and bug reports from anywhere in your app. Built with the dialog, select, and textarea components.
<button type="button" class="btn btn-outline" id="feedback-modal-trigger">
Feedback
</button>
<dialog class="dialog" data-sp-toggle="#feedback-modal-trigger">
<form id="feedback" class="dialog-panel">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon absolute top-3 right-3"
data-sp-dismiss=""
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
<div class="dialog-header">
<h2 class="dialog-title">Submit Feedback</h2>
<p class="dialog-description">Share your thoughts to help us improve.</p>
</div>
<div class="dialog-content">
<div class="field-group">
<div class="field">
<label class="label" for="feedback-title">Title</label
><input
class="input"
id="feedback-title"
type="text"
placeholder="Feedback title"
name="title"
/>
</div>
<div class="field">
<label class="label" for="feedback-type">Type</label
><select class="select" id="feedback-type" name="type">
<option value="">Select type</option>
<option value="suggestion">Suggestion</option>
<option value="complaint">Complaint</option>
<option value="praise">Praise</option>
</select>
</div>
<div class="field">
<label class="label" for="feedback-description">Description</label
><textarea
class="textarea"
placeholder="Tell us more..."
id="feedback-description"
name="description"
></textarea>
</div>
</div>
</div>
<div class="dialog-footer">
<button type="button" class="btn btn-outline" data-sp-dismiss="">
Cancel</button
><button type="submit" class="btn">Submit</button>
</div>
</form>
</dialog>