Categorías

Componentes Sistema de clasificación

Sistema de clasificación

Permite a los usuarios calificar el contenido

Sistema de calificación retro

Sistema de clasificación de colores pastel retro/vintage

                ```html
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Rate Our Work</h2>

  <div class="flex items-center justify-center mb-6">
    <div class="flex space-x-2 text-xl">
      <!-- Star 1 -->
      <svg class="h-8 w-8 text-gray-400 dark:text-gray-500 hover:text-yellow-500 dark:hover:text-yellow-400 cursor-pointer transition duration-300 ease-in-out" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>
      <!-- Star 2 -->
      <svg class="h-8 w-8 text-gray-400 dark:text-gray-500 hover:text-yellow-500 dark:hover:text-yellow-400 cursor-pointer transition duration-300 ease-in-out" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>
      <!-- Star 3 -->
      <svg class="h-8 w-8 text-gray-400 dark:text-gray-500 hover:text-yellow-500 dark:hover:text-yellow-400 cursor-pointer transition duration-300 ease-in-out" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>
      <!-- Star 4 -->
      <svg class="h-8 w-8 text-gray-400 dark:text-gray-500 hover:text-yellow-500 dark:hover:text-yellow-400 cursor-pointer transition duration-300 ease-in-out" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>
      <!-- Star 5 -->
      <svg class="h-8 w-8 text-gray-400 dark:text-gray-500 hover:text-yellow-500 dark:hover:text-yellow-400 cursor-pointer transition duration-300 ease-in-out" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
      </svg>
    </div>
  </div>

  <div class="mb-4">
    <label for="comment" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Leave a comment (optional):</label>
    <textarea id="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600"></textarea>
  </div>

  <div class="flex items-center justify-between">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-900">
      Submit Rating
    </button>
  </div>
</div>
```

Componente del sistema de clasificación

Componente del sistema de clasificación con estilo de neumorfismo, efectos responsivos y compatibilidad con temas oscuros.

Abrir vista previa

                <div class='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4'><div class='w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-neumorphism dark:shadow-neumorphism-dark p-6 space-y-6'><h2 class='text-2xl font-bold text-center text-gray-800 dark:text-white'>Rate our service</h2><div class='flex items-center justify-center space-x-4'><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button></div></div></div><style>.shadow-neumorphism { box-shadow: 7px 7px 15px #c7c7c7, -7px -7px 15px #ffffff; }.dark .shadow-neumorphism-dark { box-shadow: 7px 7px 15px #333, -7px -7px 15px #555; }</style>

Componente del sistema de clasificación

Un componente del sistema de clasificación de estilo retro/vintage diseñado con Tailwind CSS, con un diseño responsivo y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Rate This Item</h2>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/200/100" alt="Item Image" class="rounded-md">
    </div>
    <div class="flex justify-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-gray-300 dark:border-gray-600 mr-2">
        <span class="text-gray-800 dark:text-white self-center">John Doe</span>
    </div>
    <div class="flex justify-center mb-4">
        <span class="text-yellow-500 text-3xl">★ ★ ★ ★ ☆</span>
    </div>
    <div class="flex justify-between mt-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Submit</button>
        <button class="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Cancel</button>
    </div>
</div>

Componente del sistema de clasificación brutalista

Un componente del sistema de calificación responsivo diseñado en un estilo brutalista usando Tailwind CSS, con soporte para temas oscuros.

Abrir vista previa

                <div class="flex flex-col items-center bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md w-80">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Us!</h2>
    <div class="flex items-center mb-5">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-3 border-2 border-gray-800 dark:border-gray-200">
        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</span>
    </div>
    <div class="flex space-x-1 mb-4">
        <span class="cursor-pointer text-3xl text-yellow-500">★</span>
        <span class="cursor-pointer text-3xl text-yellow-500">★</span>
        <span class="cursor-pointer text-3xl text-yellow-500">★</span>
        <span class="cursor-pointer text-3xl text-gray-300 dark:text-gray-500">★</span>
        <span class="cursor-pointer text-3xl text-gray-300 dark:text-gray-500">★</span>
    </div>
    <textarea class="w-full h-24 p-2 border-2 border-gray-800 dark:border-gray-200 bg-transparent text-gray-800 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="Leave your feedback..."></textarea>
    <button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold rounded-md hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-500">Submit</button>
</div>

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 vista previa

                <div class="max-w-sm mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Rate Us!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Your feedback is valuable to us!</p>
    <div class="flex items-center justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Random User" class="rounded-full border-2 border-gray-800 dark:border-white">
        <span class="ml-3 text-lg text-gray-800 dark:text-white">User Name</span>
    </div>
    <div class="flex justify-center">
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
    </div>
    <div class="mt-4">
        <button class="w-full bg-gray-800 dark:bg-yellow-400 text-white py-2 rounded-md font-bold hover:bg-yellow-500 transition duration-200">Submit Rating</button>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        .dark:hover\:bg-yellow-500:hover {
            background-color: #bb8d29;
        }
    }
</style>

Componente 24 del sistema de clasificación

Un componente del sistema de clasificación diseñado en 3D que admite temas oscuros y efectos responsivos. Este componente cuenta con estrellas para las calificaciones, avatares de usuario y una sección de comentarios.

Abrir vista previa

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-6">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full shadow-md border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
            </div>
        </div>
        <div class="flex mt-4 space-x-1">
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
        </div>
        <div class="mt-4">
            <p class="text-gray-700 dark:text-gray-300">This is a quick comment about the rating. Engaging and insightful feedback to enhance the user experience.</p>
        </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Related Image</h3>
        <img class="mt-2 rounded-lg shadow-md" src="https://picsum.photos/400/200" alt="Placeholder Image" />
    </div>
</div>