React

Tailwind

Call-to-Action

Footer

Hero

Formularios

El día de hoy traemos un componente reutilizable y personalizable de un formulario en React.js. Este ya incluye validaciones básicas y manejo de eventos.
En cuanto a su funcionamiento e implementación, sigue las buenas prácticas que se recomiendan dentro de la misma documentación de React.js, así que puede usarse sin ningún problema en producción en cualquier proyecto.
En este caso el formulario fue creado únicamente con JavaScript nativo y los hooks que ofrece la librería de React.js, por lo que no será necesario descargar dependencias externas.
<h2>Instalación</h2>
Para poder utilizar este formulario en tus proyectos solo es necesario copiar y pegar el código en el fichero de tu preferencia.
Para que los estilos puedan visualizarse es necesario que tengas instalado y configurado en el proyecto Tailwind.

Formulario de registro creado con React y Tailwind.

En esta ocasión traemos un componente hecho con Tailwind de una landing page de estilo moderno y minimalista, perfecta para proyectos de todo tipo.
El diseño está inspirado en las webs minimalistas ganadoras de premios que se han vuelto populares últimamente.
En cuento a la paleta de colores, se puede fácilmente desde la lista de estilos de Tailwind.
<h2>Instalación</h2>
Para poder usar este componente solo tienes que copiarlo y pegarlo en tu proyecto. No es necesario el descargar alguna dependencia.
En el caso de que no se muestren los estilos, verifica si está correctamente configurado Tailwind en tu proyecto.
<h3>Instalarlo en algún framework de React.js</h3>
En el caso de que quieras usar este componente en cualquier framework basado en React.js (Vite, Next.js, Remix, Gatsby, etc.), debes cambiar el nombre de las clases <code>class</code> por <code>className</code>. Y listo, debería funcionar sin ningún problema

Landing page minimalista y moderna en Tailwind

El siguiente componente de llamada a la acción (Call-to-Action) cuenta con un estilo moderno y colorido que se puede adaptar fácilmente a cualquier tipo de landing page.
La paleta de colores y los estilos se pueden cambiar directamente con las clases utilitarias de Tailwind o también se puede sobreescribir directamente con tus variable y estilos en línea.
Para quien no lo sepa, las llamadas a la acción o &#8220;Call-to-action&#8221; son parte fundamental de toda web, en especial si se buscar conversiones y/o acciones por parte del usuario. Así que lo ideal es que el diseño sea atractivo, limpio y fácil de entender.
<h2>¿Cómo instalarlo?</h2>
Solo se necesita copiar y pegar el código. Todos los estilos son compatibles con la versión default de Tailwind.
En el caso de que se quiera implementar en React, solo se necesita cambiar la palabra clave <code>class</code> por <code>className</code>.

Llamada a la acción (Call-to-Action) con Tailwind

Sección Hero de web minimalista con Tailwind

Componente Hero minimalista hecho con Tailwind

Para poder usar el siguiente componente de Tailwind en tu proyecto, solo se tiene que copiar y pegar el código.
No es necesario instalar dependencias o librerías externas para su funcionamiento.
<code></code>