<div class="card">
  <div class="card-content grid gap-6">
    <div class="grid gap-2">
      <h3 class="text-lg/6 font-semibold">Submit Feedback</h3>
      <p class="text-sm/6 text-muted-foreground">Share your thoughts to help us improve.</p>
    </div>
    <div class="grid gap-6">
      <div class="grid gap-3">
        <div class="flex items-center justify-between"><label class="label" for="title">Title</label></div>
        <input id="title" class="input" type="text" placeholder="Feedback title" />
      </div>
      <div class="grid gap-3">
        <div class="flex items-center justify-between"><label class="label" for="type">Type</label></div>
        <select id="type" class="select">
          <option value="">Select type</option>
          <option value="suggestion">Suggestion</option>
          <option value="complaint">Complaint</option>
          <option value="praise">Praise</option>
        </select>
      </div>
      <div class="grid gap-3">
        <div class="flex items-center justify-between"><label class="label" for="description">Description</label></div>
        <textarea id="description" class="textarea" placeholder="Tell us more..." rows="4"></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>
    </div>
  </div>
</div>