Vibrant_Dark_Mode_Feedback_Component

<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-950 p-4">
  <div class="w-full max-w-sm rounded-lg shadow-xl p-6 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 text-white animate-fade-in">
    <div class="text-center mb-6">
      <svg class="mx-auto mb-4 h-12 w-12 text-pink-400 dark:text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.5 13.5l-3.5 3.5-3.5-3.5M12 21V6m0 0l4-4m-4 4L8 2z" />
      </svg>
      <h2 class="text-3xl font-extrabold text-white mb-2 dark:text-gray-50">We'd Love Your Feedback!</h2>
      <p class="text-sm text-indigo-200 dark:text-purple-200">Help us improve your experience on our platform.</p>
    </div>
    <div class="space-y-4">
      <textarea placeholder="Share your thoughts..." class="w-full p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white placeholder-indigo-300 focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm h-24 resize-none"></textarea>
      <div class="flex flex-col sm:flex-row gap-4">
        <input type="email" placeholder="Your email (optional)" class="flex-1 p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white placeholder-indigo-300 focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm">
        <select class="flex-1 p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm">
          <option value="">Select Category (optional)</option>
          <option value="bug">Bug Report</option>
          <option value="feature">Feature Request</option>
          <option value="general">General Feedback</option>
          <option value="content">Content Suggestion</option>
        </select>
      </div>
    </div>
    <button class="mt-6 w-full py-3 px-4 rounded-md bg-pink-600 dark:bg-pink-700 hover:bg-pink-700 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 focus:ring-offset-indigo-900 dark:focus:ring-offset-purple-950 transition duration-300 ease-in-out text-lg font-semibold text-white shadow-lg transform hover:scale-105 active:scale-95">
      Submit Feedback
    </button>
  </div>
</div>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>