HTML + CSSInputs

Caja de prompt para IA

Un área de texto que crece, con un borde de luz que gira al escribir, atajos rápidos y botón de enviar.

Ajustes

16px
1x

Código

<form class="uv-iai"><label class="bx"><span class="sr">Pregunta lo que quieras</span><textarea rows="1" placeholder="Pregunta lo que quieras"></textarea></label><div class="rw"><button type="button" class="ch">Resumir</button><button type="button" class="ch">Traducir</button><button type="button" class="ch">Ideas</button><button type="submit" class="go" aria-label="Enviar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5.5 11.5L12 5l6.5 6.5"/></svg></button></div></form>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Inputs

Ver todos: Inputs

Dónde usarlo

Las interfaces de chat y asistentes giran alrededor de un solo campo, así que merece mimo. Esta caja crece con el texto, enciende un borde de degradado que gira y un brillo suave al enfocarla, y ofrece tres atajos que rellenan una instrucción. El botón de enviar se queda gris mientras está vacía y se llena de color cuando hay algo que mandar.

Sirve para herramientas de escritura con IA, chats de soporte, buscadores en lenguaje natural y asistentes internos. El textarea es un campo de formulario real y el borde animado se detiene con movimiento reducido.