1. Conversión de Tarjeta de Interfaz
Diseñador Web FrontendContexto
Un diseñador necesita replicar el diseño de una tarjeta interactiva construida en Tailwind dentro de un sitio web antiguo que no tiene el framework instalado.
Problema
Extraer el CSS equivalente para un contenedor con flexbox, espaciados adaptativos, bordes redondeados y sombras.
Cómo usarlo
Introduce las clases `flex gap-4 p-6 hover:bg-blue-500/20 md:p-8 rounded-lg shadow-lg` en el cuadro de texto y selecciona el ámbito `.my-class`.
classes: "flex gap-4 p-6 hover:bg-blue-500/20 md:p-8 rounded-lg shadow-lg", selector: ".my-class"Resultado
Se genera un bloque CSS para `.my-class` con flexbox y padding, un bloque `.my-class:hover` con el fondo azul translúcido en `rgba()`, y una regla `@media` para pantallas medianas.