유기적 인 자연 피드백 구성 요소

<div class="font-sans bg-gradient-to-br from-gray-100 to-blue-50 dark:from-gray-900 dark:to-blue-950 min-h-screen p-4 sm:p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out scale-95 md:scale-100 group" style="box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
    <!-- Organic Top Border -->
    <div class="h-4 sm:h-6 bg-gradient-to-r from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 relative overflow-hidden">
      <svg class="absolute w-full h-full" viewBox="0 0 100 10" preserveAspectRatio="none">
        <path d="M0,5 Q25,0 50,5 T100,5" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-200 dark:text-blue-800"></path>
        <path d="M0,6 Q25,1 50,6 T100,6" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-100 dark:text-blue-700"></path>
      </svg>
    </div>

    <div class="p-6 sm:p-10">
      <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-8 pb-6 border-b border-gray-200 dark:border-gray-700">
        <div>
          <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight mb-2">
            Your Game, Your Voice
          </h2>
          <p class="text-gray-600 dark:text-gray-400 text-lg sm:text-xl font-light">
            Help us shape the future of our game universe.
          </p>
        </div>
        <button class="mt-6 md:mt-0 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-full shadow-lg transform transition-all duration-300 ease-in-out hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800">
          Submit Feedback
        </button>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
        <!-- Interactive Rating Section -->
        <div class="bg-gray-50 dark:bg-gray-850 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-inner overflow-hidden relative">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.536 4.736h4.982c.969 0 1.371 1.246.588 1.81l-4.04 2.936 1.536 4.736c.3.921-.755 1.688-1.536 1.12L12 16.03l-4.04 2.936c-.78.568-1.835-.199-1.536-1.12l1.536-4.736-4.04-2.936c-.782-.564-.38-1.81.588-1.81h4.982L11.049 2.927z"></path></svg>
            Overall Satisfaction
          </h3>
          <div class="flex justify-center sm:justify-start space-x-2 sm:space-x-4 mb-4 select-none">
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😒</span>
            </button>
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😐</span>
            </button>
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😊</span>
            </button>
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-blue-100 dark:bg-blue-700 text-blue-600 dark:text-blue-200 ring-2 ring-blue-300 dark:ring-blue-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😍</span>
            </button>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-center sm:text-left">Click to select your experience.</p>

          <!-- Organic Shape (SVG) as background element -->
          <svg class="absolute bottom-0 right-0 w-32 h-32 opacity-10 blur-sm transform translate-x-1/4 translate-y-1/4 -rotate-12 pointer-events-none" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M50 0C68.45 0 83.21 17.55 79.9 35.85C77.41 49.33 65.65 60 50 60C34.35 60 22.59 49.33 20.1 35.85C16.79 17.55 31.55 0 50 0Z" fill="url(#paint0_linear_organic)" />
            <defs>
              <linearGradient id="paint0_linear_organic" x1="50" y1="0" x2="50" y2="60" gradientUnits="userSpaceOnUse">
                <stop stop-color="#8DCBF7"/>
                <stop offset="1" stop-color="#428DFF"/>
              </linearGradient>
            </defs>
          </svg>
        </div>

        <!-- Feature Feedback Tabs -->
        <div class="bg-gray-50 dark:bg-gray-850 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-inner">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Specific Areas
          </h3>
          <div class="flex flex-wrap gap-2 text-sm">
            <button class="px-4 py-2 rounded-full border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200 transition-colors duration-200 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Gameplay Mechanics
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Graphics & Art
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              User Interface
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Story & Lore
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Performance
            </button>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Select areas you want to provide feedback on.</p>
        </div>
      </div>

      <!-- Detailed Feedback Section -->
      <div class="mb-8">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
          <svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M14 6H10a2 2 0 00-2 2v6L5 21l3-3h11a2 2 0 002-2V8a2 2 0 00-2-2z"></path></svg>
          Your Thoughts
        </h3>
        <textarea class="w-full p-4 rounded-xl border border-gray-200 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition-all duration-200 leading-relaxed resize-y" rows="6" placeholder="Tell us what you love, what could be better, or any new ideas..."></textarea>
      </div>

      <!-- User Info & Consent -->
      <div class="flex flex-col sm:flex-row items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
        <div class="flex items-center mb-4 sm:mb-0">
          <img class="w-12 h-12 rounded-full border-2 border-blue-300 dark:border-blue-600 mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-medium">Player 'Phoenix'</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Connected via GameID #123456</p>
          </div>
        </div>
        <div class="flex items-center">
          <input type="checkbox" id="consent" class="h-5 w-5 rounded form-checkbox text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 transition-colors duration-200">
          <label for="consent" class="ml-2 text-gray-700 dark:text-gray-300 select-none text-sm">
            Allow us to contact you for clarification.
          </label>
        </div>
      </div>
    </div>

    <!-- Organic Bottom Border -->
    <div class="h-4 sm:h-6 bg-gradient-to-r from-blue-400 to-blue-300 dark:from-blue-700 dark:to-blue-600 relative overflow-hidden">
      <svg class="absolute w-full h-full" viewBox="0 0 100 10" preserveAspectRatio="none">
        <path d="M0,5 Q25,10 50,5 T100,5" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-100 dark:text-blue-700"></path>
        <path d="M0,4 Q25,9 50,4 T100,4" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-200 dark:text-blue-800"></path>
      </svg>
    </div>
  </div>
</div>