Feedback Rating Card

<!--
  Day 121: Feedback rating card

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Feedback Rating Card -->
<div
  class="mx-auto w-full max-w-md rounded-3xl bg-white p-6 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
  <!-- Header -->
  <div class="flex items-start justify-between gap-4">
    <div>
      <h3 class="text-sm font-semibold text-zinc-900">
        How was your experience?
      </h3>
      <p class="mt-1 text-xs text-zinc-500">Takes less than a minute</p>
    </div>
    <button
      type="button"
      aria-label="Dismiss"
      class="flex flex-none items-center justify-center rounded-lg p-1.5 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-700"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="hi-micro hi-x-mark inline-block size-4"
      >
        <path
          d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
        />
      </svg>
    </button>
  </div>
  <!-- END Header -->

  <!-- Ratings -->
  <fieldset class="mt-6">
    <legend class="sr-only">Choose a rating</legend>
    <div class="grid grid-cols-5 gap-2">
      <!-- Rating: Awful -->
      <label class="group relative flex">
        <input
          type="radio"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="rating-awful"
          name="rating"
        />
        <span
          class="flex grow flex-col items-center gap-1.5 rounded-2xl border-2 border-zinc-100 bg-white p-3 font-semibold text-zinc-500 grayscale group-hover:border-zinc-200 group-hover:bg-zinc-50 group-hover:text-zinc-900 group-hover:grayscale-0 peer-checked:border-amber-400 peer-checked:bg-amber-50 peer-checked:font-bold peer-checked:text-amber-700 peer-checked:ring-4 peer-checked:ring-amber-100 peer-checked:grayscale-0 peer-focus:ring-3 peer-focus:ring-amber-100"
        >
          <span class="text-2xl">😞</span>
          <span class="text-[10px]">Awful</span>
        </span>
      </label>
      <!-- END Rating: Awful -->

      <!-- Rating: Bad -->
      <label class="group relative flex">
        <input
          type="radio"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="rating-bad"
          name="rating"
        />
        <span
          class="flex grow flex-col items-center gap-1.5 rounded-2xl border-2 border-zinc-100 bg-white p-3 font-semibold text-zinc-500 grayscale group-hover:border-zinc-200 group-hover:bg-zinc-50 group-hover:text-zinc-900 group-hover:grayscale-0 peer-checked:border-amber-400 peer-checked:bg-amber-50 peer-checked:font-bold peer-checked:text-amber-700 peer-checked:ring-4 peer-checked:ring-amber-100 peer-checked:grayscale-0 peer-focus:ring-3 peer-focus:ring-amber-100"
        >
          <span class="text-2xl">😕</span>
          <span class="text-[10px]">Bad</span>
        </span>
      </label>
      <!-- END Rating: Bad -->

      <!-- Rating: Okay -->
      <label class="group relative flex">
        <input
          type="radio"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="rating-okay"
          name="rating"
        />
        <span
          class="flex grow flex-col items-center gap-1.5 rounded-2xl border-2 border-zinc-100 bg-white p-3 font-semibold text-zinc-500 grayscale group-hover:border-zinc-200 group-hover:bg-zinc-50 group-hover:text-zinc-900 group-hover:grayscale-0 peer-checked:border-amber-400 peer-checked:bg-amber-50 peer-checked:font-bold peer-checked:text-amber-700 peer-checked:ring-4 peer-checked:ring-amber-100 peer-checked:grayscale-0 peer-focus:ring-3 peer-focus:ring-amber-100"
        >
          <span class="text-2xl">😐</span>
          <span class="text-[10px]">Okay</span>
        </span>
      </label>
      <!-- END Rating: Okay -->

      <!-- Rating: Good -->
      <label class="group relative flex">
        <input
          type="radio"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="rating-good"
          name="rating"
          checked
        />
        <span
          class="flex grow flex-col items-center gap-1.5 rounded-2xl border-2 border-zinc-100 bg-white p-3 font-semibold text-zinc-500 grayscale group-hover:border-zinc-200 group-hover:bg-zinc-50 group-hover:text-zinc-900 group-hover:grayscale-0 peer-checked:border-amber-400 peer-checked:bg-amber-50 peer-checked:font-bold peer-checked:text-amber-700 peer-checked:ring-4 peer-checked:ring-amber-100 peer-checked:grayscale-0 peer-focus:ring-3 peer-focus:ring-amber-100"
        >
          <span class="text-2xl">🙂</span>
          <span class="text-[10px]">Good</span>
        </span>
      </label>
      <!-- END Rating: Good -->

      <!-- Rating: Great -->
      <label class="group relative flex">
        <input
          type="radio"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="rating-great"
          name="rating"
        />
        <span
          class="flex grow flex-col items-center gap-1.5 rounded-2xl border-2 border-zinc-100 bg-white p-3 font-semibold text-zinc-500 grayscale group-hover:border-zinc-200 group-hover:bg-zinc-50 group-hover:text-zinc-900 group-hover:grayscale-0 peer-checked:border-amber-400 peer-checked:bg-amber-50 peer-checked:font-bold peer-checked:text-amber-700 peer-checked:ring-4 peer-checked:ring-amber-100 peer-checked:grayscale-0 peer-focus:ring-3 peer-focus:ring-amber-100"
        >
          <span class="text-2xl">🤩</span>
          <span class="text-[10px]">Great</span>
        </span>
      </label>
      <!-- END Rating: Great -->
    </div>
  </fieldset>
  <!-- END Ratings -->

  <!-- Tags -->
  <div class="mt-6">
    <p class="text-xs font-semibold text-zinc-700">What went well?</p>
    <div class="mt-3 flex flex-wrap gap-2">
      <!-- Tag -->
      <label class="group relative flex">
        <input
          type="checkbox"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="tag-easy"
          name="went-well[]"
          value="easy-to-use"
          checked
        />
        <span
          class="inline-flex items-center rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-zinc-700 ring-1 ring-zinc-200 group-hover:bg-zinc-50 peer-checked:bg-zinc-700 peer-checked:text-white peer-checked:ring-transparent peer-focus:ring-3 peer-focus:ring-zinc-300"
        >
          Easy to use
        </span>
      </label>
      <!-- END Tag -->

      <!-- Tag -->
      <label class="group relative flex">
        <input
          type="checkbox"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="tag-support"
          name="went-well[]"
          value="fast-support"
        />
        <span
          class="inline-flex items-center rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-zinc-700 ring-1 ring-zinc-200 group-hover:bg-zinc-50 peer-checked:bg-zinc-700 peer-checked:text-white peer-checked:ring-transparent peer-focus:ring-3 peer-focus:ring-zinc-300"
        >
          Fast support
        </span>
      </label>
      <!-- END Tag -->

      <!-- Tag -->
      <label class="group relative flex">
        <input
          type="checkbox"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="tag-design"
          name="went-well[]"
          value="clean-design"
          checked
        />
        <span
          class="inline-flex items-center rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-zinc-700 ring-1 ring-zinc-200 group-hover:bg-zinc-50 peer-checked:bg-zinc-700 peer-checked:text-white peer-checked:ring-transparent peer-focus:ring-3 peer-focus:ring-zinc-300"
        >
          Clean design
        </span>
      </label>
      <!-- END Tag -->

      <!-- Tag -->
      <label class="group relative flex">
        <input
          type="checkbox"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="tag-value"
          name="went-well[]"
          value="good-value"
        />
        <span
          class="inline-flex items-center rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-zinc-700 ring-1 ring-zinc-200 group-hover:bg-zinc-50 peer-checked:bg-zinc-700 peer-checked:text-white peer-checked:ring-transparent peer-focus:ring-3 peer-focus:ring-zinc-300"
        >
          Good value
        </span>
      </label>
      <!-- END Tag -->

      <!-- Tag -->
      <label class="group relative flex">
        <input
          type="checkbox"
          class="peer absolute top-0 left-0 appearance-none opacity-0"
          id="tag-reliable"
          name="went-well[]"
          value="reliable"
        />
        <span
          class="inline-flex items-center rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-zinc-700 ring-1 ring-zinc-200 group-hover:bg-zinc-50 peer-checked:bg-zinc-700 peer-checked:text-white peer-checked:ring-transparent peer-focus:ring-3 peer-focus:ring-zinc-300"
        >
          Reliable
        </span>
      </label>
      <!-- END Tag -->
    </div>
  </div>
  <!-- END Tags -->

  <!-- Comment -->
  <div class="mt-6">
    <label for="feedback-message" class="text-xs font-semibold text-zinc-700"
      >Tell us more (optional)</label
    >
    <div class="relative mt-2">
      <textarea
        id="feedback-message"
        rows="3"
        placeholder="What would make it a five-star experience?"
        class="block w-full rounded-2xl border-0 bg-zinc-50 p-3.5 pr-12 text-sm text-zinc-900 ring-1 ring-zinc-200 placeholder:text-zinc-400 focus:bg-white focus:ring-2 focus:ring-zinc-400 focus:outline-hidden"
      ></textarea>
      <span
        class="absolute right-3 bottom-3 text-[10px] font-medium text-zinc-400"
        >0 / 280</span
      >
    </div>
  </div>
  <!-- END Comment -->

  <!-- Footer -->
  <div
    class="mt-6 flex items-center justify-between gap-3 border-t border-dashed border-zinc-200 pt-5"
  >
    <p class="text-[11px] text-zinc-500">
      Your feedback is anonymous and helps us improve.
    </p>
    <div class="flex flex-none items-center gap-2">
      <button
        type="button"
        class="rounded-xl px-3 py-2 text-xs font-semibold text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 active:bg-zinc-100"
      >
        Skip
      </button>
      <button
        type="button"
        class="inline-flex items-center gap-1.5 rounded-xl bg-zinc-900 px-3.5 py-2 text-xs font-semibold text-white hover:bg-zinc-700 active:bg-zinc-800"
      >
        <span>Send feedback</span>
      </button>
    </div>
  </div>
  <!-- END Footer -->
</div>
<!-- END Feedback Rating Card -->