Componente de filtros
Un componente de filtros simple y receptivo para redes sociales con un estilo de microinteracciones, un esquema de color análogo y soporte para temas oscuros.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4">
<div class="container mx-auto">
<h2 class="text-xl font-bold mb-4">Filters</h2>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:scale-105">
Popular
</button>
<button class="px-4 py-2 bg-green-500 text-white rounded-full hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out transform hover:scale-105">
Latest
</button>
<button class="px-4 py-2 bg-yellow-500 text-white rounded-full hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-800 transition duration-300 ease-in-out transform hover:scale-105">
Following
</button>
<button class="px-4 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 transition duration-300 ease-in-out transform hover:scale-105">
Friends
</button>
</div>
</div>
</div>Componentes relacionados
Componente de filtros
Un componente de filtros responsivo para el comercio electrónico con microinteracciones atractivas y un esquema de color triádico, compatible con el modo oscuro.
FiltersComponent
Un componente de filtros receptivo diseñado en estilo Material Design para aplicaciones de comercio electrónico con soporte para temas oscuros. Incluye múltiples elementos interactivos para una experiencia de compra mejorada.
Componente de filtros
Un componente de filtros brutalistas con CSS de Tailwind, con un diseño responsivo, compatibilidad con temas oscuros y marcadores de posición para imágenes y avatares.