10 Ejemplos de Landing Pages Modernas con Tailwind CSS (Código Completo y Listo)

Pedirle a ChatGPT “hazme una landing page bonita” genera HTML genérico con colores random y layouts que parecen de 2018. La IA no tiene gusto estético — no puede decirte si algo “se ve bien”.

Estos 10 bloques están curados a mano y probados visualmente. Cada uno es un componente independiente que puedes copiar, pegar y adaptar.

Cómo usar estos ejemplos

1. Copia el código HTML/Tailwind
2. Pega en tu proyecto (cualquier framework o HTML puro)
3. Cambia textos, colores e imágenes
4. Los colores usan variables CSS fáciles de personalizar

Todos los ejemplos asumen que tienes Tailwind CSS instalado. Si no, sigue la guía oficial.

---

1. Hero Section — Gradiente con CTA

El hero es lo primero que ve el usuario. Este diseño usa un gradiente oscuro con texto grande y dos botones de acción.

<section class="relative overflow-hidden bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900">
  <div class="absolute inset-0 bg-[url('/grid-pattern.svg')] opacity-10"></div>
  <div class="relative mx-auto max-w-5xl px-6 py-24 sm:py-32 lg:py-40 text-center">
    <span class="inline-block rounded-full bg-blue-500/10 px-4 py-1.5 text-sm font-medium text-blue-400 ring-1 ring-blue-500/20 mb-8">
      Nuevo: Integración con IA
    </span>
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white tracking-tight leading-tight">
      Construye tu SaaS<br>
      <span class="bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
        10x más rápido
      </span>
    </h1>
    <p class="mt-6 text-lg sm:text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
      Framework completo con autenticación, pagos, dashboard y API. 
      Deja de reinventar la rueda y lanza en días, no en meses.
    </p>
    <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
      <a href="#" class="rounded-lg bg-blue-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-blue-600/25 hover:bg-blue-500 transition-colors">
        Empezar gratis →
      </a>
      <a href="#" class="rounded-lg border border-gray-600 px-8 py-3.5 text-base font-semibold text-gray-300 hover:bg-gray-800 transition-colors">
        Ver demo
      </a>
    </div>
    <p class="mt-6 text-sm text-gray-500">
      Sin tarjeta de crédito · Setup en 5 minutos · Cancela cuando quieras
    </p>
  </div>
</section>

Por qué funciona: Gradiente sobrio (no rainbow), badge de novedad arriba, headline con contraste de color, subtítulo que habla de beneficios, dos CTAs con jerarquía visual (primario azul, secundario outline), y texto de confianza debajo.

---

2. Feature Grid — 3 columnas con iconos

<section class="bg-white dark:bg-gray-900 py-20 px-6">
  <div class="mx-auto max-w-5xl text-center mb-16">
    <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">
      Todo lo que necesitas para lanzar
    </h2>
    <p class="mt-4 text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Cada feature está probada en producción con miles de usuarios.
    </p>
  </div>
  <div class="mx-auto max-w-5xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Feature 1 -->
    <div class="relative rounded-2xl border border-gray-200 dark:border-gray-800 p-8 hover:border-blue-500/50 transition-colors">
      <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-600 text-white text-xl mb-5">
        🔐
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Autenticación</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400 leading-relaxed">
        Login con Google, GitHub y email. Sesiones seguras con JWT y refresh tokens. Listo en 5 minutos.
      </p>
    </div>
    <!-- Feature 2 -->
    <div class="relative rounded-2xl border border-gray-200 dark:border-gray-800 p-8 hover:border-blue-500/50 transition-colors">
      <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-600 text-white text-xl mb-5">
        💳
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Pagos con Stripe</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400 leading-relaxed">
        Suscripciones, one-time payments y webhooks configurados. Portal de cliente incluido.
      </p>
    </div>
    <!-- Feature 3 -->
    <div class="relative rounded-2xl border border-gray-200 dark:border-gray-800 p-8 hover:border-blue-500/50 transition-colors">
      <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-600 text-white text-xl mb-5">
        📊
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Dashboard</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400 leading-relaxed">
        Panel de admin con gráficas, tablas con filtros, y exportación a CSV. Dark mode incluido.
      </p>
    </div>
    <!-- Feature 4 -->
    <div class="relative rounded-2xl border border-gray-200 dark:border-gray-800 p-8 hover:border-blue-500/50 transition-colors">
      <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-amber-600 text-white text-xl mb-5">
        📧
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emails transaccionales</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400 leading-relaxed">
        Templates de email con React Email. Welcome, reset password, invoices — todo listo.
      </p>
    </div>
    <!-- Feature 5 -->
    <div class="relative rounded-2xl border border-gray-200 dark:border-gray-800 p-8 hover:border-blue-500/50 transition-colors">
      <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-rose-600 text-white text-xl mb-5">
        🚀
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Deploy en 1 clic</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400 leading-relaxed">
        Vercel, Railway o Docker. CI/CD con GitHub Actions preconfigurado. De git push a producción.
      </p>
    </div>
    <!-- Feature 6 -->
    <div class="relative rounded-2xl border border-gray-200 dark:border-gray-800 p-8 hover:border-blue-500/50 transition-colors">
      <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-600 text-white text-xl mb-5">
        🤖
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">IA integrada</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400 leading-relaxed">
        Streaming con OpenAI/Claude listo para usar. RAG con embeddings y vector search incluido.
      </p>
    </div>
  </div>
</section>

Tips de diseño: Las tarjetas con hover:border-blue-500/50 dan feedback visual sin ser agresivas. Los iconos con fondo de color roto por sección (azul, verde, morado…) crean variedad. El grid pasa a 1 columna en móvil automáticamente.

---

3. Pricing Table — 3 planes con plan destacado

<section class="bg-gray-50 dark:bg-gray-950 py-20 px-6">
  <div class="mx-auto max-w-5xl text-center mb-16">
    <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">
      Precios simples, sin sorpresas
    </h2>
    <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
      Empieza gratis. Escala cuando lo necesites.
    </p>
  </div>
  <div class="mx-auto max-w-5xl grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
    <!-- Free -->
    <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-8">
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Free</h3>
      <p class="mt-2 text-sm text-gray-500">Para proyectos personales</p>
      <p class="mt-6"><span class="text-4xl font-bold text-gray-900 dark:text-white">0€</span><span class="text-gray-500">/mes</span></p>
      <ul class="mt-8 space-y-3 text-sm text-gray-600 dark:text-gray-400">
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> 1 proyecto</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> 1.000 usuarios</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> Auth básica</li>
        <li class="flex items-center gap-3"><span class="text-gray-300 dark:text-gray-600">✗</span> Custom domain</li>
        <li class="flex items-center gap-3"><span class="text-gray-300 dark:text-gray-600">✗</span> Soporte prioritario</li>
      </ul>
      <a href="#" class="mt-8 block w-full rounded-lg border border-gray-300 dark:border-gray-700 py-2.5 text-center text-sm font-semibold text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
        Empezar gratis
      </a>
    </div>
    <!-- Pro (destacado) -->
    <div class="rounded-2xl border-2 border-blue-600 bg-white dark:bg-gray-900 p-8 shadow-xl shadow-blue-600/10 relative">
      <span class="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-blue-600 px-4 py-1 text-xs font-semibold text-white">
        Más popular
      </span>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Pro</h3>
      <p class="mt-2 text-sm text-gray-500">Para SaaS en producción</p>
      <p class="mt-6"><span class="text-4xl font-bold text-gray-900 dark:text-white">29€</span><span class="text-gray-500">/mes</span></p>
      <ul class="mt-8 space-y-3 text-sm text-gray-600 dark:text-gray-400">
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> Proyectos ilimitados</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> 50.000 usuarios</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> Auth + OAuth providers</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> Custom domain</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> Soporte por email</li>
      </ul>
      <a href="#" class="mt-8 block w-full rounded-lg bg-blue-600 py-2.5 text-center text-sm font-semibold text-white shadow-lg shadow-blue-600/25 hover:bg-blue-500 transition-colors">
        Empezar con Pro
      </a>
    </div>
    <!-- Enterprise -->
    <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-8">
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Enterprise</h3>
      <p class="mt-2 text-sm text-gray-500">Para equipos grandes</p>
      <p class="mt-6"><span class="text-4xl font-bold text-gray-900 dark:text-white">99€</span><span class="text-gray-500">/mes</span></p>
      <ul class="mt-8 space-y-3 text-sm text-gray-600 dark:text-gray-400">
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> Todo lo de Pro</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> Usuarios ilimitados</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> SSO / SAML</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> SLA 99.9%</li>
        <li class="flex items-center gap-3"><span class="text-green-500">✓</span> Soporte prioritario 24/7</li>
      </ul>
      <a href="#" class="mt-8 block w-full rounded-lg border border-gray-300 dark:border-gray-700 py-2.5 text-center text-sm font-semibold text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
        Contactar ventas
      </a>
    </div>
  </div>
</section>

Por qué funciona: El plan central tiene border-2 border-blue-600 + shadow-xl + badge “Más popular” para llamar la atención. Los checkmarks en verde y las X en gris crean un contraste visual inmediato. El CTA del plan Pro es el único con fondo lleno.

---

4. Testimonios — Tarjetas con avatar

<section class="bg-white dark:bg-gray-900 py-20 px-6">
  <div class="mx-auto max-w-5xl text-center mb-16">
    <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">
      Lo que dicen nuestros usuarios
    </h2>
  </div>
  <div class="mx-auto max-w-5xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="rounded-2xl border border-gray-200 dark:border-gray-800 p-6">
      <div class="flex items-center gap-1 text-amber-400 text-sm mb-4">★★★★★</div>
      <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
        "Lancé mi SaaS en 2 semanas usando este boilerplate. Lo que más me gustó es que los pagos con Stripe ya estaban configurados — eso solo me habría llevado 3 días."
      </p>
      <div class="mt-6 flex items-center gap-3">
        <div class="h-10 w-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white text-sm font-bold">ML</div>
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">María López</p>
          <p class="text-xs text-gray-500">Fundadora de TaskFlow</p>
        </div>
      </div>
    </div>
    <div class="rounded-2xl border border-gray-200 dark:border-gray-800 p-6">
      <div class="flex items-center gap-1 text-amber-400 text-sm mb-4">★★★★★</div>
      <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
        "El código está limpio y bien documentado. No es un boilerplate de esos que necesitas 2 días para entender la estructura. Lo abrí y ya sabía dónde estaba todo."
      </p>
      <div class="mt-6 flex items-center gap-3">
        <div class="h-10 w-10 rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center text-white text-sm font-bold">DR</div>
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">David Ruiz</p>
          <p class="text-xs text-gray-500">Senior Dev en Acme Corp</p>
        </div>
      </div>
    </div>
    <div class="rounded-2xl border border-gray-200 dark:border-gray-800 p-6">
      <div class="flex items-center gap-1 text-amber-400 text-sm mb-4">★★★★★</div>
      <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
        "El soporte es de 10. Tuve un problema con los webhooks de Stripe y me respondieron en 2 horas con una solución que funcionó a la primera."
      </p>
      <div class="mt-6 flex items-center gap-3">
        <div class="h-10 w-10 rounded-full bg-gradient-to-br from-rose-500 to-pink-500 flex items-center justify-center text-white text-sm font-bold">AC</div>
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Ana Castillo</p>
          <p class="text-xs text-gray-500">Freelance fullstack</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tip: Los avatares con gradientes (en vez de imágenes) se ven modernos y no necesitas fotos reales. Si tienes fotos, usa <img class="h-10 w-10 rounded-full object-cover">.

---

5. CTA Final — Fondo con gradiente

<section class="relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-violet-600"></div>
  <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-white/10 via-transparent to-transparent"></div>
  <div class="relative mx-auto max-w-3xl px-6 py-20 sm:py-28 text-center">
    <h2 class="text-3xl sm:text-4xl font-bold text-white">
      ¿Listo para lanzar tu próximo proyecto?
    </h2>
    <p class="mt-4 text-lg text-blue-100 max-w-xl mx-auto">
      Únete a +2.000 desarrolladores que ya están construyendo más rápido.
    </p>
    <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
      <a href="#" class="rounded-lg bg-white px-8 py-3.5 text-base font-semibold text-blue-600 shadow-lg hover:bg-gray-100 transition-colors">
        Empezar gratis →
      </a>
      <a href="#" class="rounded-lg border border-white/30 px-8 py-3.5 text-base font-semibold text-white hover:bg-white/10 transition-colors">
        Ver documentación
      </a>
    </div>
  </div>
</section>

---

6. Stats Counter — Números que impresionan

<section class="bg-gray-900 py-16 px-6">
  <div class="mx-auto max-w-5xl grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
    <div>
      <p class="text-3xl sm:text-4xl font-bold text-white">2.5K+</p>
      <p class="mt-2 text-sm text-gray-400">Desarrolladores</p>
    </div>
    <div>
      <p class="text-3xl sm:text-4xl font-bold text-white">450+</p>
      <p class="mt-2 text-sm text-gray-400">Apps en producción</p>
    </div>
    <div>
      <p class="text-3xl sm:text-4xl font-bold text-white">99.9%</p>
      <p class="mt-2 text-sm text-gray-400">Uptime</p>
    </div>
    <div>
      <p class="text-3xl sm:text-4xl font-bold text-white">4.9/5</p>
      <p class="mt-2 text-sm text-gray-400">Valoración</p>
    </div>
  </div>
</section>

---

7. FAQ Accordion (solo CSS, sin JavaScript)

<section class="bg-white dark:bg-gray-900 py-20 px-6">
  <div class="mx-auto max-w-2xl">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-white text-center mb-12">
      Preguntas frecuentes
    </h2>
    <div class="divide-y divide-gray-200 dark:divide-gray-800">
      <details class="group py-4" open>
        <summary class="flex cursor-pointer items-center justify-between text-left text-base font-semibold text-gray-900 dark:text-white">
          ¿Necesito saber TypeScript?
          <span class="ml-4 text-gray-400 group-open:rotate-45 transition-transform text-xl">+</span>
        </summary>
        <p class="mt-3 text-gray-600 dark:text-gray-400 leading-relaxed">
          Recomendable pero no obligatorio. Todo el código tiene tipos, lo que te ayuda con el autocompletado. Si solo sabes JavaScript, podrás seguir igualmente.
        </p>
      </details>
      <details class="group py-4">
        <summary class="flex cursor-pointer items-center justify-between text-left text-base font-semibold text-gray-900 dark:text-white">
          ¿Incluye actualizaciones?
          <span class="ml-4 text-gray-400 group-open:rotate-45 transition-transform text-xl">+</span>
        </summary>
        <p class="mt-3 text-gray-600 dark:text-gray-400 leading-relaxed">
          Sí. Todas las actualizaciones menores y de seguridad están incluidas de por vida. Las major versions nuevas tienen un 50% de descuento para clientes existentes.
        </p>
      </details>
      <details class="group py-4">
        <summary class="flex cursor-pointer items-center justify-between text-left text-base font-semibold text-gray-900 dark:text-white">
          ¿Puedo usarlo en múltiples proyectos?
          <span class="ml-4 text-gray-400 group-open:rotate-45 transition-transform text-xl">+</span>
        </summary>
        <p class="mt-3 text-gray-600 dark:text-gray-400 leading-relaxed">
          Sí. La licencia es por desarrollador, no por proyecto. Puedes usarlo en todos los proyectos personales y comerciales que quieras.
        </p>
      </details>
    </div>
  </div>
</section>

Tip: El <details> + <summary> HTML nativo funciona como accordion sin JavaScript. El group-open:rotate-45 gira el + en × cuando se abre.

---

8. Navbar — Sticky con blur

<nav class="sticky top-0 z-50 border-b border-gray-200/50 dark:border-gray-800/50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-lg">
  <div class="mx-auto max-w-5xl flex items-center justify-between px-6 py-4">
    <a href="/" class="text-xl font-bold text-gray-900 dark:text-white">
      MiSaaS<span class="text-blue-600">.</span>
    </a>
    <div class="hidden md:flex items-center gap-8 text-sm text-gray-600 dark:text-gray-400">
      <a href="#features" class="hover:text-gray-900 dark:hover:text-white transition-colors">Features</a>
      <a href="#pricing" class="hover:text-gray-900 dark:hover:text-white transition-colors">Precios</a>
      <a href="#faq" class="hover:text-gray-900 dark:hover:text-white transition-colors">FAQ</a>
      <a href="/blog" class="hover:text-gray-900 dark:hover:text-white transition-colors">Blog</a>
    </div>
    <div class="flex items-center gap-4">
      <a href="/login" class="hidden sm:block text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
        Iniciar sesión
      </a>
      <a href="/signup" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors">
        Empezar gratis
      </a>
    </div>
  </div>
</nav>

El truco del blur: bg-white/80 backdrop-blur-lg crea ese efecto glassmorphism donde la navbar es semi-transparente y el contenido de debajo se difumina al hacer scroll. Muy popular en 2025-2026.

---

9. Footer — Limpio con columnas

<footer class="bg-gray-950 border-t border-gray-800 px-6 py-16">
  <div class="mx-auto max-w-5xl grid grid-cols-2 md:grid-cols-4 gap-8">
    <div class="col-span-2 md:col-span-1">
      <p class="text-lg font-bold text-white">MiSaaS<span class="text-blue-500">.</span></p>
      <p class="mt-3 text-sm text-gray-400 leading-relaxed">
        Construye más rápido. Lanza antes. Itera con datos.
      </p>
    </div>
    <div>
      <h4 class="text-sm font-semibold text-white mb-4">Producto</h4>
      <ul class="space-y-2.5 text-sm text-gray-400">
        <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
        <li><a href="#" class="hover:text-white transition-colors">Precios</a></li>
        <li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
        <li><a href="#" class="hover:text-white transition-colors">Roadmap</a></li>
      </ul>
    </div>
    <div>
      <h4 class="text-sm font-semibold text-white mb-4">Recursos</h4>
      <ul class="space-y-2.5 text-sm text-gray-400">
        <li><a href="#" class="hover:text-white transition-colors">Documentación</a></li>
        <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
        <li><a href="#" class="hover:text-white transition-colors">Guías</a></li>
        <li><a href="#" class="hover:text-white transition-colors">Soporte</a></li>
      </ul>
    </div>
    <div>
      <h4 class="text-sm font-semibold text-white mb-4">Legal</h4>
      <ul class="space-y-2.5 text-sm text-gray-400">
        <li><a href="#" class="hover:text-white transition-colors">Privacidad</a></li>
        <li><a href="#" class="hover:text-white transition-colors">Términos</a></li>
        <li><a href="#" class="hover:text-white transition-colors">Cookies</a></li>
      </ul>
    </div>
  </div>
  <div class="mx-auto max-w-5xl mt-12 pt-8 border-t border-gray-800 flex flex-col sm:flex-row justify-between items-center gap-4">
    <p class="text-xs text-gray-500">© 2026 MiSaaS. Todos los derechos reservados.</p>
    <div class="flex gap-4 text-gray-500">
      <a href="#" class="hover:text-white transition-colors" aria-label="GitHub">GH</a>
      <a href="#" class="hover:text-white transition-colors" aria-label="Twitter">TW</a>
      <a href="#" class="hover:text-white transition-colors" aria-label="Discord">DC</a>
    </div>
  </div>
</footer>

---

10. Banner de oferta — Sticky top

<div class="bg-gradient-to-r from-blue-600 to-violet-600 px-4 py-2.5 text-center text-sm text-white">
  <p>
    🎉 <strong>Black Friday</strong>: 50% de descuento con el código
    <code class="rounded bg-white/20 px-1.5 py-0.5 font-mono text-xs">BF2026</code>
    — <a href="#" class="underline underline-offset-2 hover:text-blue-200">Ver oferta →</a>
  </p>
</div>

---

Cómo combinar estos bloques

Para montar una landing completa, apílalos en este orden:

1. Banner de oferta (si aplica)
2. Navbar sticky
3. Hero section
4. Stats counter
5. Feature grid
6. Testimonios
7. Pricing table
8. FAQ accordion
9. CTA final
10. Footer

Copia cada bloque, pégalos uno debajo del otro, y cambia los textos. En 30 minutos tienes una landing profesional.

Artículos relacionados

• Cómo hice mi portfolio con Vite y Tailwind — este mismo portfolio en acción
• Cursor vs Copilot vs Windsurf — herramientas de IA que te ayudan a maquetar más rápido