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