Una landing page sin un call-to-action potente no es más que un folleto. Informa, pero no convierte. La sección CTA es donde le pides al visitante que dé el paso: registrarse, empezar una prueba, reservar una demo, suscribirse. Y el diseño de esa sección influye directamente en si lo hace o no.
Esta guía cubre cinco patrones de CTA en React con Tailwind CSS que superan de forma constante al típico banner genérico de "Regístrate ahora".
1. CTA a ancho completo con fondo en degradado
El CTA de alto impacto más habitual: una banda a ancho completo con un titular contundente, una descripción breve y un solo botón. El fondo en degradado crea una separación visual respecto al contenido que va encima y debajo.
function FullWidthCTA() {
return (
<section className="bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-50 dark:to-neutral-200">
<div className="mx-auto max-w-4xl px-6 py-24 text-center">
<h2 className="text-3xl font-bold tracking-tight text-white dark:text-neutral-900 sm:text-4xl">
Start building faster today
</h2>
<p className="mt-4 text-lg text-neutral-300 dark:text-neutral-600">
Join 10,000+ developers who ship production-ready UIs in hours, not weeks.
</p>
<div className="mt-8 flex justify-center gap-4">
<a
href="/signup"
className="rounded-full bg-white px-8 py-3 text-sm font-semibold text-neutral-900 hover:bg-neutral-100 transition-colors"
>
Get started free
</a>
<a
href="/demo"
className="rounded-full border border-neutral-600 px-8 py-3 text-sm font-semibold text-white hover:border-neutral-400 transition-colors"
>
Book a demo
</a>
</div>
</div>
</section>
);
}
Dos botones funcionan mejor que uno. La acción principal ("Get started free") tiene mucho contraste y resulta evidente. La acción secundaria ("Book a demo") capta a quienes todavía no están listos para comprometerse pero sí tienen el interés suficiente para saber más. El estilo de botón fantasma comunica con claridad su rol secundario.
Por qué importa el diseño del CTA
La investigación sobre optimización de la tasa de conversión muestra de forma consistente tres cosas sobre los CTA:
El contraste gana. La sección CTA debería verse visualmente distinta de todo lo que la rodea. Una sección oscura entre secciones claras (o al revés) crea un punto de parada natural que atrae la mirada.
La concreción convierte. "Get started free" rinde más que "Sign up". "Ship your first page in 5 minutes" rinde más que "Get started". Cuanto más específica sea la promesa, mayor será la tasa de clics.
Lenguaje que reduce la fricción. Frases como "No credit card required" y "Free forever for small teams" abordan de frente la duda que el visitante siente justo en ese momento.
2. CTA dividido (texto + imagen)
Un layout de dos columnas donde la parte izquierda lleva el titular y el botón, y la derecha muestra una captura del producto, una ilustración o una vista previa en vídeo. Funciona muy bien para CTA centrados en el producto:
El layout usa grid md:grid-cols-2 items-center gap-12. En móvil, la imagen se apila debajo del texto. En escritorio, quedan una al lado de la otra.
La columna de la imagen debería mostrar el producto en contexto: un dashboard, un editor, una herramienta de diseño. Las ilustraciones abstractas son menos eficaces porque no ayudan al visitante a imaginarse usando el producto.
3. CTA con prueba social
Añadir prueba social directamente dentro de la sección CTA es uno de los cambios de mayor impacto que puedes hacer. Citas de testimonios, número de usuarios o barras de logos junto al botón de registro reducen el riesgo percibido.
El patrón: titular y botón arriba, luego un separador fino, y después una fila de avatares con una etiqueta del tipo "Trusted by 8,000+ teams" o una tira de logos de clientes.
function CTAWithSocialProof() {
return (
<section className="mx-auto max-w-4xl px-6 py-24 text-center">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
Ready to launch your next project?
</h2>
<p className="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
Copy-paste production components. Customize in minutes.
</p>
<a
href="/signup"
className="mt-8 inline-flex rounded-full bg-neutral-900 px-8 py-3 text-sm font-semibold text-white hover:bg-neutral-700 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors"
>
Start building
</a>
<div className="mt-10 flex items-center justify-center gap-3">
<div className="flex -space-x-2">
{[1, 2, 3, 4, 5].map((i) => (
<img
key={i}
src={`/avatars/${i}.jpg`}
alt=""
className="h-8 w-8 rounded-full border-2 border-white dark:border-neutral-900"
/>
))}
</div>
<p className="text-sm text-neutral-500">
Trusted by <strong className="text-neutral-900 dark:text-white">8,000+</strong> developers
</p>
</div>
</section>
);
}
La pila de avatares solapados (-space-x-2) transmite sensación de comunidad. Las fotos reales rinden más que los iconos de relleno. Si no tienes fotos reales de usuarios, usa iniciales dentro de círculos de colores.
4. CTA flotante / fijo
Para páginas largas (entradas de blog, casos de estudio, documentación), una barra CTA fija en la parte inferior de la ventana capta a los visitantes que ya han leído lo suficiente para convencerse pero no quieren desplazarse de nuevo hasta arriba.
Se implementa con fixed bottom-0 left-0 right-0 y un fondo backdrop-blur-md. Muéstrala solo después de que el usuario haya pasado un cierto punto, usando un IntersectionObserver:
"use client";
import { useEffect, useState } from "react";
function StickyBar() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => setVisible(!entry.isIntersecting),
{ threshold: 0 }
);
const hero = document.getElementById("hero");
if (hero) observer.observe(hero);
return () => observer.disconnect();
}, []);
if (!visible) return null;
return (
<div className="fixed bottom-0 inset-x-0 z-50 border-t bg-white/80 backdrop-blur-md dark:bg-neutral-950/80 dark:border-neutral-800">
<div className="mx-auto max-w-7xl flex items-center justify-between px-6 py-3">
<p className="text-sm font-medium">Ready to build faster?</p>
<a
href="/signup"
className="rounded-full bg-neutral-900 px-6 py-2 text-sm font-semibold text-white dark:bg-white dark:text-neutral-900"
>
Get started
</a>
</div>
</div>
);
}
El IntersectionObserver vigila la sección hero. En cuanto el hero sale de la vista, aparece la barra fija. Así evitas mostrar el CTA cuando el visitante acaba de llegar y todavía no ha visto ningún contenido.
5. CTA de newsletter
No todos los CTA son un registro. Los CTA de newsletter recogen direcciones de email a cambio de contenido: novedades, consejos, acceso anticipado. El diseño es más sencillo: un titular, un argumento de una línea y un campo de email con un botón de envío.
El campo y el botón deberían ir en la misma línea en escritorio (flex gap-2) y apilarse en móvil. La etiqueta del botón debería decir qué pasa a continuación: "Subscribe" es genérico; "Get weekly tips" es concreto.
Añade una nota de tranquilidad sobre la privacidad debajo del campo: "No spam, ever. Unsubscribe anytime." Esa simple línea mejora de forma medible la tasa de conversión en los formularios de newsletter.
Estrategia de colocación
La sección CTA debería aparecer al menos dos veces en una landing page:
- Después del hero: para los visitantes que ya saben lo que quieren
- Después de la sección de prueba social o de precios: para los visitantes que necesitaban más convencimiento
No pongas un CTA después de cada sección, porque genera fatiga de decisión y resulta agresivo. Entre dos y tres CTA por página es el punto justo.
Color y contraste
El botón del CTA debería ser el elemento de mayor contraste de la página. Si tu sitio usa tonos neutros, haz que el botón del CTA lleve el color de acento de tu marca. Si tu sitio ya es colorido, usa negro o blanco para el CTA y así destacará.
Nunca uses un botón fantasma para el CTA principal. Los botones fantasma son para acciones secundarias. La acción principal necesita un relleno sólido que grite "haz clic aquí".
Consigue secciones CTA prediseñadas
El catálogo de CTA de Incubator tiene más de 15 variantes de sección CTA: a ancho completo, dividido, con prueba social, barras fijas, newsletter y más, todas hechas en React con Tailwind CSS y listas para personalizar.
Echa un vistazo a la biblioteca de componentes completa para cada sección, desde navbars hasta footers.
Relacionado en incubator
- Variantes de sección CTA: componentes call-to-action listos para usar en React.
- Secciones de prueba social: añade credibilidad junto a tu CTA.
- Secciones de estadísticas: contadores animados que refuerzan el texto de conversión.
- Efectos hover e interacciones: microinteracciones para botones de CTA.
- Incubator vs Tailwind UI: qué biblioteca encaja con tus necesidades de CTA.