Feedback Components 组件

<div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-center text-indigo-700 dark:text-indigo-400 mb-4 tracking-tight">
        We Value Your Feedback!
      </h2>
      <p class="text-center text-gray-600 dark:text-gray-300 leading-relaxed">
        Help us improve our services by sharing your thoughts.
      </p>

      <form class="space-y-6">
        <div>
          <label for="feedback-type" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            What type of feedback is this?
          </label>
          <div class="relative">
            <select id="feedback-type" name="feedback-type" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none transition-colors duration-200">
              <option value="general">General Feedback</option>
              <option value="suggestion">Suggestion</option>
              <option value="bug">Bug Report</option>
              <option value="compliment">Compliment</option>
              <option value="other">Other</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
              <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>

        <div>
          <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            Your Message
          </label>
          <textarea id="message" name="message" rows="4" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 sm:text-sm transition-colors duration-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Tell us what's on your mind..."></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">How would you rate your experience?</label>
          <div class="flex justify-center space-x-2">
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😡</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Poor</span>
            </button>
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😐</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Okay</span>
            </button>
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😊</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Good</span>
            </button>
          </div>
        </div>

        <button type="submit" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0 active:scale-98">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
          </svg>
          Submit Feedback
        </button>
      </form>
    </div>
  </div>
</div>