Starting Point
v0.33.1

Search documentation

Search for a page and jump to it.

Start typing to search...
Go to Page
escClose

Tailwind CSS Feedback Form

A feedback form for Tailwind CSS with a type select, a title input, and a message textarea. Built with the card, select, and textarea components.

<div class="card w-full max-w-sm">
  <div class="card-header">
    <h3 class="card-title">Submit Feedback</h3>
    <p class="card-description">Share your thoughts to help us improve.</p>
  </div>
  <form class="card-content field-group">
    <div class="field">
      <label class="label" for="fb-title">Title</label
      ><input
        class="input"
        id="fb-title"
        type="text"
        placeholder="Feedback title"
        name="title"
      />
    </div>
    <div class="field">
      <label class="label" for="fb-type">Type</label
      ><select class="select" id="fb-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="fb-description">Description</label
      ><textarea
        class="textarea"
        id="fb-description"
        name="description"
        placeholder="Tell us more..."
      ></textarea>
    </div>
    <div class="flex justify-end gap-2">
      <button class="btn btn-outline" type="button">Cancel</button
      ><button class="btn" type="submit">Submit</button>
    </div>
  </form>
</div>

More card examples