Componentes Sistema de clasificación Bauhaus_Grayscale_Rating_System_Component
Bauhaus_Grayscale_Rating_System_Component

Un componente complejo y receptivo del sistema de calificación diseñado en un estilo Bauhaus con un esquema de color en escala de grises, adecuado para sitios web de eventos y conferencias. Cuenta con elementos interactivos y compatibilidad con el modo oscuro.
Vista previa

Código HTML

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight tracking-tight text-center sm:text-left">
        Rate Your Experience at &ldquo;FutureTech Summit 2024&rdquo;
      </h2>
      <p class="text-md text-gray-600 dark:text-gray-400 text-center sm:text-left">
        Your feedback helps us improve future events. Please select your ratings below.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">

      <!-- Overall Satisfaction -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Overall Satisfaction</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <!-- Star 1 -->
          <div class="relative group">
            <input type="radio" id="overall-star-1" name="overall-satisfaction" class="hidden peer" value="1">
            <label for="overall-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Terrible">&#9733;</label>
          </div>
          <!-- Star 2 -->
          <div class="relative group">
            <input type="radio" id="overall-star-2" name="overall-satisfaction" class="hidden peer" value="2">
            <label for="overall-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Poor">&#9733;</label>
          </div>
          <!-- Star 3 -->
          <div class="relative group">
            <input type="radio" id="overall-star-3" name="overall-satisfaction" class="hidden peer" value="3">
            <label for="overall-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Average">&#9733;</label>
          </div>
          <!-- Star 4 -->
          <div class="relative group">
            <input type="radio" id="overall-star-4" name="overall-satisfaction" class="hidden peer" value="4">
            <label for="overall-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Good">&#9733;</label>
          </div>
          <!-- Star 5 -->
          <div class="relative group">
            <input type="radio" id="overall-star-5" name="overall-satisfaction" class="hidden peer" value="5">
            <label for="overall-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Excellent">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How would you rate your overall experience?</p>
      </div>

      <!-- Content Quality -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Content Quality</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="content-star-1" name="content-quality" class="hidden peer" value="1">
            <label for="content-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-2" name="content-quality" class="hidden peer" value="2">
            <label for="content-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-3" name="content-quality" class="hidden peer" value="3">
            <label for="content-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-4" name="content-quality" class="hidden peer" value="4">
            <label for="content-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-5" name="content-quality" class="hidden peer" value="5">
            <label for="content-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How valuable was the session content?</p>
      </div>

      <!-- Speaker Engagement -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Speaker Engagement</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="speaker-star-1" name="speaker-engagement" class="hidden peer" value="1">
            <label for="speaker-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-2" name="speaker-engagement" class="hidden peer" value="2">
            <label for="speaker-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-3" name="speaker-engagement" class="hidden peer" value="3">
            <label for="speaker-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-4" name="speaker-engagement" class="hidden peer" value="4">
            <label for="speaker-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-5" name="speaker-engagement" class="hidden peer" value="5">
            <label for="speaker-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How engaging and clear were the speakers?</p>
      </div>

      <!-- Venue & Logistics -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Venue & Logistics</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="venue-star-1" name="venue-logistics" class="hidden peer" value="1">
            <label for="venue-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-2" name="venue-logistics" class="hidden peer" value="2">
            <label for="venue-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-3" name="venue-logistics" class="hidden peer" value="3">
            <label for="venue-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-4" name="venue-logistics" class="hidden peer" value="4">
            <label for="venue-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-5" name="venue-logistics" class="hidden peer" value="5">
            <label for="venue-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How was the venue and event organization?</p>
      </div>

      <!-- Networking Opportunities -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Networking Opportunities</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="network-star-1" name="networking-opportunities" class="hidden peer" value="1">
            <label for="network-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-2" name="networking-opportunities" class="hidden peer" value="2">
            <label for="network-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-3" name="networking-opportunities" class="hidden peer" value="3">
            <label for="network-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-4" name="networking-opportunities" class="hidden peer" value="4">
            <label for="network-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-5" name="networking-opportunities" class="hidden peer" value="5">
            <label for="network-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Were there sufficient networking chances?</p>
      </div>

      <!-- Value for Money -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Value for Money</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="value-star-1" name="value-for-money" class="hidden peer" value="1">
            <label for="value-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-2" name="value-for-money" class="hidden peer" value="2">
            <label for="value-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-3" name="value-for-money" class="hidden peer" value="3">
            <label for="value-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-4" name="value-for-money" class="hidden peer" value="4">
            <label for="value-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-5" name="value-for-money" class="hidden peer" value="5">
            <label for="value-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Did the event offer good value for its cost?</p>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Additional Feedback</h3>
      <textarea class="w-full p-3 sm:p-4 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 resize-y min-h-[100px] transition-colors duration-200" placeholder="Please share any other thoughts or suggestions..."></textarea>

      <div class="mt-6 flex justify-end">
        <button type="submit" class="px-6 py-3 bg-black text-white font-semibold rounded-md shadow-md hover:bg-gray-800 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-100">
          Submit Feedback
        </button>
      </div>
    </div>
  </div>
</div>
Componentes relacionados

Componente del Sistema de Clasificación Forestal Monoespacial

Un componente del sistema de calificación limpio e inspirado en el código con una paleta verde bosque, adecuado para carteras. Cuenta con estrellas interactivas para la calificación y muestra calificaciones promedio, totalmente receptivo con soporte para modo oscuro.
Abrir
Sistema de clasificación de glassmorphism

Un sistema de calificación al estilo Glassmorphism con colores complementarios, diseñado para plataformas de redes sociales. Incluye un diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.
Abrir
Componente del sistema de clasificación

Un componente web interactivo para calificar elementos con un diseño esqueuomórfico que imita a sus homólogos del mundo real. Adecuado para exhibir trabajos o productos en un portafolio.
Abrir