Componentes Sistema de clasificación Componente del sistema de clasificación

Componente del sistema de clasificación

Un componente del sistema de clasificación limpio y minimalista con una combinación de colores dulces/dulces, diseñado para datos meteorológicos/climáticos. Utiliza un sistema de cuadrícula y enfatiza la tipografía, con capacidad de respuesta total y soporte para modo oscuro.

Vista previa

Código HTML

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-green-100 dark:from-purple-950 dark:via-gray-900 dark:to-teal-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 transform transition-all duration-300 hover:scale-105 border border-purple-200 dark:border-gray-700 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-24 h-24 bg-gradient-to-br from-pink-300 to-purple-300 dark:from-sky-700 dark:to-purple-700 rounded-br-full opacity-70 blur-md"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl from-green-300 to-yellow-300 dark:from-emerald-700 dark:to-lime-700 rounded-tl-full opacity-70 blur-md"></div>

    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white mb-2 sm:mb-4 tracking-tight leading-tight text-center relative z-10">
      Rate Today's Climate
    </h2>
    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 text-center relative z-10">
      How would you describe the overall weather conditions?
    </p>

    <div class="grid grid-cols-5 gap-2 sm:gap-3 justify-items-center mb-8 relative z-10">
      <!-- Star 1 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-pink-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Poor
        </span>
      </button>

      <!-- Star 2 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-purple-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Fair
        </span>
      </button>

      <!-- Star 3 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-green-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Good
        </span>
      </button>

      <!-- Star 4 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Great
        </span>
      </button>

      <!-- Star 5 -->
      <button class="flex flex-col items-center group focus:outline-none focus:ring-4 focus:ring-yellow-300 focus:ring-opacity-75 rounded-lg active:scale-95 transition-transform duration-200">
        <span class="block text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 group-hover:text-amber-400 group-focus:text-amber-500 transition-colors duration-200">
          ★
        </span>
        <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1">
          Perfect
        </span>
      </button>
    </div>

    <div class="space-y-4 relative z-10">
      <label for="comments" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Optional comments:</label>
      <textarea id="comments" rows="3" class="w-full p-3 border border-pink-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition-colors duration-200 bg-pink-50 dark:bg-gray-700 text-gray-800 dark:text-gray-50 placeholder-pink-400 dark:placeholder-gray-400 resize-none" placeholder="E.g., 'Sunny with a light breeze.'"></textarea>
    </div>

    <button class="mt-8 w-full py-3 px-6 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-sky-600 dark:to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-sky-500 relative z-10">
      Submit Rating
    </button>

    <p class="text-xxs text-gray-400 dark:text-gray-500 mt-6 text-center relative z-10">
      Provided by <a href="#" class="underline hover:text-gray-500 dark:hover:text-gray-400 transition-colors duration-200">ClimatePulse Data</a>
    </p>
  </div>
</div>

Componentes relacionados

Componente del sistema de clasificación

Un componente del sistema de clasificación responsivo diseñado en un estilo Brutalism usando Tailwind CSS. Es compatible con el tema oscuro y tiene un alto contraste con un diseño crudo y atrevido.

Abrir

Monospace_Developer_Autumn_Rating_System_Component

Un componente complejo del sistema de clasificación inspirado en el monoespacio con colores otoñales para aplicaciones industriales y de fabricación. Cuenta con un diseño limpio, múltiples elementos interactivos, capacidad de respuesta total y compatibilidad con el 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