En esta página

Proyecto final: Landing page con Tailwind v4

25 min lectura TextoCap. 5 — Tailwind avanzado

Proyecto final: landing page completa con Tailwind v4

En esta lección construirás una landing page completa que integra todos los conceptos del curso. La página incluye navbar responsiva con dark mode, hero section, sección de características, grid de cursos, tabla de precios, testimonios, formulario de contacto y footer.

Estructura del proyecto

Antes de escribir código, planifica la estructura:

landing-page/
├── index.html       ← Toda la página
├── styles.css       ← @import "tailwindcss" + @theme personalizado
└── main.js          ← Toggle de dark mode (mínimo JS)

Paso 1: Configuración base (styles.css)

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@theme {
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-accent:    #7c3aed;
  --font-sans:       'Inter', ui-sans-serif, system-ui, sans-serif;
  --animate-fade-in-up: fade-in-up 0.5s ease-out both;
  --animate-fade-in:    fade-in 0.3s ease-out both;
}

Paso 2: Navbar responsiva con toggle de dark mode

La navbar necesita ser sticky, tener fondo semitransparente con blur, y adaptarse a móvil:

<header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-950/80
               backdrop-blur-md border-b border-gray-100 dark:border-gray-800">
  <nav class="flex items-center justify-between
              max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16">

    <!-- Logo con gradiente -->
    <a href="/" class="flex items-center gap-2.5 font-bold text-xl
                       text-gray-900 dark:text-white">
      <div class="w-9 h-9 bg-gradient-to-br from-blue-500 to-purple-600
                  rounded-xl flex items-center justify-center shadow-md
                  shadow-blue-500/30">
        <span class="text-white font-black">D</span>
      </div>
      DevLearn
    </a>

    <!-- Links de navegación (ocultos en móvil) -->
    <ul class="hidden md:flex items-center gap-8" role="list">
      <li>
        <a href="#cursos"
           class="text-sm font-medium text-gray-600 dark:text-gray-400
                  hover:text-gray-900 dark:hover:text-white transition-colors
                  focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
          Cursos
        </a>
      </li>
      <li>
        <a href="#precios"
           class="text-sm font-medium text-gray-600 dark:text-gray-400
                  hover:text-gray-900 dark:hover:text-white transition-colors
                  focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
          Precios
        </a>
      </li>
      <li>
        <a href="#testimonios"
           class="text-sm font-medium text-gray-600 dark:text-gray-400
                  hover:text-gray-900 dark:hover:text-white transition-colors
                  focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
          Testimonios
        </a>
      </li>
    </ul>

    <!-- Acciones -->
    <div class="flex items-center gap-2 sm:gap-3">
      <!-- Toggle dark mode -->
      <button type="button"
              id="theme-toggle"
              aria-label="Alternar modo oscuro"
              class="p-2 rounded-xl text-gray-500 dark:text-gray-400
                     hover:bg-gray-100 dark:hover:bg-gray-800
                     transition-colors focus-visible:ring-2
                     focus-visible:ring-blue-500">
        <svg id="icon-sun" class="w-5 h-5 hidden dark:block"
             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="5"/>
          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
        </svg>
        <svg id="icon-moon" class="w-5 h-5 block dark:hidden"
             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
        </svg>
      </button>

      <a href="/login"
         class="hidden sm:block text-sm font-medium text-gray-600 dark:text-gray-400
                hover:text-gray-900 dark:hover:text-white transition-colors">
        Entrar
      </a>

      <a href="/registro"
         class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold
                px-4 py-2 rounded-xl transition-colors
                focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
        Empezar gratis
      </a>
    </div>

  </nav>
</header>

Paso 3: Hero section

<section class="relative overflow-hidden bg-gradient-to-b
                from-blue-50 to-white dark:from-gray-900 dark:to-gray-950
                pt-24 pb-32 px-4">

  <!-- Decoración de fondo con blobs -->
  <div aria-hidden="true" class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-40 right-0 w-96 h-96
                bg-blue-400/20 dark:bg-blue-500/10 rounded-full blur-3xl"></div>
    <div class="absolute bottom-0 -left-20 w-80 h-80
                bg-purple-400/20 dark:bg-purple-500/10 rounded-full blur-3xl"></div>
  </div>

  <div class="relative max-w-5xl mx-auto text-center">

    <!-- Badge de novedad -->
    <div class="inline-flex items-center gap-2 bg-blue-50 dark:bg-blue-950/50
                text-blue-700 dark:text-blue-300 text-sm font-semibold
                px-4 py-2 rounded-full border border-blue-200 dark:border-blue-800
                mb-8 animate-fade-in">
      <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
      Actualizado para 2025 · Angular v21 + Tailwind v4
    </div>

    <!-- Título principal -->
    <h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold
               tracking-tight leading-none mb-6
               text-gray-900 dark:text-white
               animate-fade-in-up">
      Aprende a programar<br class="hidden sm:block">
      <span class="bg-gradient-to-r from-blue-500 via-blue-600 to-purple-600
                   bg-clip-text text-transparent">
        sin límites
      </span>
    </h1>

    <!-- Subtítulo -->
    <p class="text-xl sm:text-2xl text-gray-600 dark:text-gray-400
              max-w-2xl mx-auto leading-relaxed mb-12
              [animation-delay:100ms] animate-fade-in-up">
      Cursos prácticos impartidos por expertos en la industria.
      Aprende a tu ritmo con proyectos reales.
    </p>

    <!-- CTAs -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center
                [animation-delay:200ms] animate-fade-in-up">
      <a href="/registro"
         class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800
                text-white font-bold px-8 py-4 rounded-2xl text-lg
                transition-all duration-200 motion-safe:hover:-translate-y-0.5
                hover:shadow-xl hover:shadow-blue-500/30
                focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
        Empieza gratis hoy →
      </a>
      <a href="#demo"
         class="flex items-center justify-center gap-2 font-bold
                border-2 border-gray-200 dark:border-gray-700
                text-gray-700 dark:text-gray-300 px-8 py-4 rounded-2xl text-lg
                hover:border-gray-300 dark:hover:border-gray-600
                hover:bg-gray-50 dark:hover:bg-gray-900
                transition-colors">
        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
          <path d="M8 5v14l11-7z"/>
        </svg>
        Ver demo
      </a>
    </div>

    <!-- Social proof / stats -->
    <dl class="flex flex-wrap justify-center gap-x-12 gap-y-6 mt-16
               pt-10 border-t border-gray-100 dark:border-gray-800">
      <div class="text-center">
        <dt class="text-sm text-gray-500 dark:text-gray-400">Estudiantes activos</dt>
        <dd class="text-3xl font-black text-gray-900 dark:text-white mt-1">5,200+</dd>
      </div>
      <div class="text-center">
        <dt class="text-sm text-gray-500 dark:text-gray-400">Horas de contenido</dt>
        <dd class="text-3xl font-black text-gray-900 dark:text-white mt-1">200+</dd>
      </div>
      <div class="text-center">
        <dt class="text-sm text-gray-500 dark:text-gray-400">Valoración media</dt>
        <dd class="text-3xl font-black text-gray-900 dark:text-white mt-1">4.9 ⭐</dd>
      </div>
      <div class="text-center">
        <dt class="text-sm text-gray-500 dark:text-gray-400">Certificados emitidos</dt>
        <dd class="text-3xl font-black text-gray-900 dark:text-white mt-1">1,800+</dd>
      </div>
    </dl>

  </div>
</section>

Paso 4: Grid de características

<section class="py-24 px-4 bg-gray-50 dark:bg-gray-900">
  <div class="max-w-6xl mx-auto">

    <div class="text-center mb-16">
      <p class="text-sm font-semibold text-blue-600 dark:text-blue-400
                uppercase tracking-widest mb-3">
        Características
      </p>
      <h2 class="text-4xl font-extrabold text-gray-900 dark:text-white
                 tracking-tight mb-4">
        ¿Por qué DevLearn?
      </h2>
      <p class="text-lg text-gray-500 dark:text-gray-400 max-w-xl mx-auto">
        Diseñado para desarrolladores que quieren avanzar rápido sin sacrificar calidad.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <div class="bg-white dark:bg-gray-800 rounded-2xl p-8
                  border border-gray-100 dark:border-gray-700 shadow-sm
                  hover:shadow-md transition-shadow group">
        <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl
                    flex items-center justify-center mb-6
                    group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50
                    transition-colors">
          <span class="text-2xl" role="img" aria-label="Cohete">🚀</span>
        </div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">
          Aprendizaje acelerado
        </h3>
        <p class="text-gray-500 dark:text-gray-400 leading-relaxed">
          Lecciones cortas y enfocadas diseñadas para retención máxima.
          De cero a empleable en 3 meses.
        </p>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-2xl p-8
                  border border-gray-100 dark:border-gray-700 shadow-sm
                  hover:shadow-md transition-shadow group">
        <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-xl
                    flex items-center justify-center mb-6
                    group-hover:bg-purple-200 dark:group-hover:bg-purple-900/50
                    transition-colors">
          <span class="text-2xl" role="img" aria-label="Diana">🎯</span>
        </div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">
          Proyectos reales
        </h3>
        <p class="text-gray-500 dark:text-gray-400 leading-relaxed">
          Cada curso termina con un proyecto que puedes incluir
          directamente en tu portafolio profesional.
        </p>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-2xl p-8
                  border border-gray-100 dark:border-gray-700 shadow-sm
                  hover:shadow-md transition-shadow group
                  sm:col-span-2 lg:col-span-1">
        <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl
                    flex items-center justify-center mb-6
                    group-hover:bg-green-200 dark:group-hover:bg-green-900/50
                    transition-colors">
          <span class="text-2xl" role="img" aria-label="Personas">👥</span>
        </div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">
          Comunidad activa
        </h3>
        <p class="text-gray-500 dark:text-gray-400 leading-relaxed">
          Acceso a una comunidad de +5,000 desarrolladores y
          mentores disponibles para resolver tus dudas.
        </p>
      </div>

    </div>
  </div>
</section>

Paso 5: Sección de precios

<section id="precios" class="py-24 px-4 bg-white dark:bg-gray-950">
  <div class="max-w-5xl mx-auto">

    <div class="text-center mb-16">
      <h2 class="text-4xl font-extrabold text-gray-900 dark:text-white
                 tracking-tight mb-4">
        Precios simples y transparentes
      </h2>
      <p class="text-lg text-gray-500 dark:text-gray-400">
        Sin sorpresas. Sin tarjeta de crédito para empezar.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">

      <!-- Plan Gratuito -->
      <div class="bg-gray-50 dark:bg-gray-900 rounded-2xl p-8
                  border border-gray-200 dark:border-gray-700">
        <h3 class="font-bold text-lg text-gray-900 dark:text-white">Gratuito</h3>
        <div class="mt-4 mb-6">
          <span class="text-5xl font-black text-gray-900 dark:text-white">$0</span>
          <span class="text-gray-500 dark:text-gray-400">/mes</span>
        </div>
        <ul class="space-y-3 mb-8" role="list">
          <li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
            <span class="text-green-500">✓</span> 5 cursos incluidos
          </li>
          <li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
            <span class="text-green-500">✓</span> Acceso a la comunidad
          </li>
          <li class="flex items-center gap-3 text-sm text-gray-400 dark:text-gray-600">
            <span class="text-gray-300">✗</span> Certificados
          </li>
        </ul>
        <a href="/registro"
           class="block text-center bg-white dark:bg-gray-800 text-gray-900 dark:text-white
                  font-semibold py-3 rounded-xl border border-gray-200 dark:border-gray-600
                  hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
          Empezar gratis
        </a>
      </div>

      <!-- Plan Pro (destacado) -->
      <div class="bg-blue-600 rounded-2xl p-8 shadow-xl shadow-blue-500/30
                  ring-4 ring-blue-500/20 relative">
        <span class="absolute -top-3 left-1/2 -translate-x-1/2
                     bg-amber-400 text-amber-900 text-xs font-black
                     px-4 py-1 rounded-full uppercase tracking-wide">
          Más popular
        </span>
        <h3 class="font-bold text-lg text-white">Pro</h3>
        <div class="mt-4 mb-6">
          <span class="text-5xl font-black text-white">$19</span>
          <span class="text-blue-200">/mes</span>
        </div>
        <ul class="space-y-3 mb-8" role="list">
          <li class="flex items-center gap-3 text-sm text-blue-100">
            <span class="text-blue-200">✓</span> Todo lo del plan gratuito
          </li>
          <li class="flex items-center gap-3 text-sm text-blue-100">
            <span class="text-blue-200">✓</span> Acceso ilimitado
          </li>
          <li class="flex items-center gap-3 text-sm text-blue-100">
            <span class="text-blue-200">✓</span> Certificados verificables
          </li>
          <li class="flex items-center gap-3 text-sm text-blue-100">
            <span class="text-blue-200">✓</span> Soporte prioritario
          </li>
        </ul>
        <a href="/registro?plan=pro"
           class="block text-center bg-white text-blue-700 font-bold
                  py-3 rounded-xl hover:bg-blue-50 transition-colors
                  focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2
                  focus-visible:ring-offset-blue-600">
          Empezar con Pro
        </a>
      </div>

      <!-- Plan Equipo -->
      <div class="bg-gray-50 dark:bg-gray-900 rounded-2xl p-8
                  border border-gray-200 dark:border-gray-700">
        <h3 class="font-bold text-lg text-gray-900 dark:text-white">Equipo</h3>
        <div class="mt-4 mb-6">
          <span class="text-5xl font-black text-gray-900 dark:text-white">$49</span>
          <span class="text-gray-500 dark:text-gray-400">/mes</span>
        </div>
        <ul class="space-y-3 mb-8" role="list">
          <li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
            <span class="text-green-500">✓</span> Todo lo de Pro
          </li>
          <li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
            <span class="text-green-500">✓</span> Hasta 10 usuarios
          </li>
          <li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
            <span class="text-green-500">✓</span> Panel de administrador
          </li>
        </ul>
        <a href="/registro?plan=team"
           class="block text-center bg-white dark:bg-gray-800 text-gray-900 dark:text-white
                  font-semibold py-3 rounded-xl border border-gray-200 dark:border-gray-600
                  hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
          Para equipos
        </a>
      </div>

    </div>
  </div>
</section>

Paso 6: Testimonios

<section id="testimonios" class="py-24 px-4 bg-gray-50 dark:bg-gray-900">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl font-extrabold text-center text-gray-900 dark:text-white
               tracking-tight mb-16">
      Lo que dicen nuestros estudiantes
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

      <figure class="bg-white dark:bg-gray-800 rounded-2xl p-8
                     border border-gray-100 dark:border-gray-700 shadow-sm">
        <div class="flex gap-1 text-amber-400 mb-4" aria-label="5 estrellas">
          <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
        </div>
        <blockquote class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          "Conseguí mi primer trabajo como desarrollador frontend después de
          completar el curso de Angular. La calidad del contenido es increíble."
        </blockquote>
        <figcaption class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-purple-500
                      flex items-center justify-center text-white font-bold text-sm">
            AM
          </div>
          <div>
            <p class="font-semibold text-gray-900 dark:text-white text-sm">Ana Martínez</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Frontend Developer en TechCorp</p>
          </div>
        </figcaption>
      </figure>

      <figure class="bg-white dark:bg-gray-800 rounded-2xl p-8
                     border border-gray-100 dark:border-gray-700 shadow-sm">
        <div class="flex gap-1 text-amber-400 mb-4" aria-label="5 estrellas">
          <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
        </div>
        <blockquote class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          "Pasé de saber CSS básico a construir interfaces profesionales en
          semanas. El curso de Tailwind cambió mi forma de trabajar."
        </blockquote>
        <figcaption class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-teal-500
                      flex items-center justify-center text-white font-bold text-sm">
            CL
          </div>
          <div>
            <p class="font-semibold text-gray-900 dark:text-white text-sm">Carlos López</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Freelance Developer</p>
          </div>
        </figcaption>
      </figure>

      <figure class="bg-white dark:bg-gray-800 rounded-2xl p-8
                     border border-gray-100 dark:border-gray-700 shadow-sm">
        <div class="flex gap-1 text-amber-400 mb-4" aria-label="5 estrellas">
          <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
        </div>
        <blockquote class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          "Los proyectos reales al final de cada curso son lo que más valoro.
          Puedo mostrarle a un empleador exactamente lo que sé hacer."
        </blockquote>
        <figcaption class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-400 to-rose-500
                      flex items-center justify-center text-white font-bold text-sm">
            LR
          </div>
          <div>
            <p class="font-semibold text-gray-900 dark:text-white text-sm">Laura Rodríguez</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Full Stack Developer</p>
          </div>
        </figcaption>
      </figure>

    </div>
  </div>
</section>

Paso 7: Formulario de contacto

<section class="py-24 px-4 bg-white dark:bg-gray-950">
  <div class="max-w-lg mx-auto">
    <div class="text-center mb-10">
      <h2 class="text-4xl font-extrabold text-gray-900 dark:text-white tracking-tight mb-3">
        ¿Tienes preguntas?
      </h2>
      <p class="text-gray-500 dark:text-gray-400">
        Escríbenos y te respondemos en menos de 24 horas.
      </p>
    </div>

    <form class="space-y-5" novalidate>
      <div class="space-y-1.5">
        <label for="contact-name"
               class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Nombre
        </label>
        <input type="text" id="contact-name" name="name"
               autocomplete="name"
               class="w-full rounded-xl border border-gray-300 dark:border-gray-600
                      px-4 py-2.5 bg-white dark:bg-gray-900
                      text-gray-900 dark:text-white
                      placeholder:text-gray-400 dark:placeholder:text-gray-500
                      outline-none transition-colors
                      focus-visible:border-blue-500 focus-visible:ring-2
                      focus-visible:ring-blue-500/20"
               placeholder="Tu nombre" />
      </div>

      <div class="space-y-1.5">
        <label for="contact-email"
               class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Email
        </label>
        <input type="email" id="contact-email" name="email"
               autocomplete="email"
               class="w-full rounded-xl border border-gray-300 dark:border-gray-600
                      px-4 py-2.5 bg-white dark:bg-gray-900
                      text-gray-900 dark:text-white
                      placeholder:text-gray-400 dark:placeholder:text-gray-500
                      outline-none transition-colors
                      focus-visible:border-blue-500 focus-visible:ring-2
                      focus-visible:ring-blue-500/20
                      invalid:border-red-400"
               placeholder="[email protected]" />
      </div>

      <div class="space-y-1.5">
        <label for="contact-message"
               class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Mensaje
        </label>
        <textarea id="contact-message" name="message" rows="4"
                  class="w-full rounded-xl border border-gray-300 dark:border-gray-600
                         px-4 py-3 bg-white dark:bg-gray-900
                         text-gray-900 dark:text-white
                         placeholder:text-gray-400 dark:placeholder:text-gray-500
                         outline-none transition-colors resize-none leading-relaxed
                         focus-visible:border-blue-500 focus-visible:ring-2
                         focus-visible:ring-blue-500/20"
                  placeholder="¿En qué podemos ayudarte?"></textarea>
      </div>

      <button type="submit"
              class="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800
                     text-white font-semibold py-3 rounded-xl transition-colors
                     focus-visible:ring-2 focus-visible:ring-blue-500
                     focus-visible:ring-offset-2">
        Enviar mensaje
      </button>
    </form>
  </div>
</section>
<footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4
               border-t border-gray-800">
  <div class="max-w-7xl mx-auto">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">

      <!-- Marca -->
      <div class="sm:col-span-2 lg:col-span-1">
        <a href="/" class="flex items-center gap-2.5 font-bold text-xl text-white mb-4">
          <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600
                      rounded-lg flex items-center justify-center">
            <span class="font-black text-sm">D</span>
          </div>
          DevLearn
        </a>
        <p class="text-sm leading-relaxed">
          La plataforma de aprendizaje para desarrolladores que quieren
          crecer profesionalmente.
        </p>
      </div>

      <!-- Plataforma -->
      <nav aria-label="Sección plataforma">
        <h3 class="font-semibold text-white mb-4 text-sm uppercase tracking-wider">
          Plataforma
        </h3>
        <ul class="space-y-3 text-sm">
          <li><a href="/cursos" class="hover:text-white transition-colors">Cursos</a></li>
          <li><a href="/rutas" class="hover:text-white transition-colors">Rutas de aprendizaje</a></li>
          <li><a href="/blog" class="hover:text-white transition-colors">Blog</a></li>
          <li><a href="/precios" class="hover:text-white transition-colors">Precios</a></li>
        </ul>
      </nav>

      <!-- Empresa -->
      <nav aria-label="Sección empresa">
        <h3 class="font-semibold text-white mb-4 text-sm uppercase tracking-wider">
          Empresa
        </h3>
        <ul class="space-y-3 text-sm">
          <li><a href="/acerca" class="hover:text-white transition-colors">Acerca de</a></li>
          <li><a href="/contacto" class="hover:text-white transition-colors">Contacto</a></li>
          <li><a href="/afiliados" class="hover:text-white transition-colors">Afiliados</a></li>
        </ul>
      </nav>

      <!-- Legal -->
      <nav aria-label="Sección legal">
        <h3 class="font-semibold text-white mb-4 text-sm uppercase tracking-wider">
          Legal
        </h3>
        <ul class="space-y-3 text-sm">
          <li><a href="/terminos" class="hover:text-white transition-colors">Términos de uso</a></li>
          <li><a href="/privacidad" class="hover:text-white transition-colors">Privacidad</a></li>
          <li><a href="/cookies" class="hover:text-white transition-colors">Cookies</a></li>
        </ul>
      </nav>

    </div>

    <!-- Bottom bar -->
    <div class="flex flex-col sm:flex-row items-center justify-between
                pt-8 border-t border-gray-800 gap-4">
      <p class="text-sm">
        &copy; 2025 DevLearn. Todos los derechos reservados.
      </p>
      <div class="flex items-center gap-4">
        <a href="https://twitter.com/devlearn" target="_blank" rel="noopener"
           class="hover:text-white transition-colors"
           aria-label="Twitter de DevLearn">
          🐦
        </a>
        <a href="https://github.com/devlearn" target="_blank" rel="noopener"
           class="hover:text-white transition-colors"
           aria-label="GitHub de DevLearn">
          💻
        </a>
        <a href="https://youtube.com/@devlearn" target="_blank" rel="noopener"
           class="hover:text-white transition-colors"
           aria-label="YouTube de DevLearn">
          ▶️
        </a>
      </div>
    </div>
  </div>
</footer>

Paso 9: JavaScript para el toggle de dark mode

<script>
  // Toggle de tema
  const toggle = document.getElementById('theme-toggle');
  const html = document.documentElement;

  // Aplicar tema guardado al cargar
  const saved = localStorage.getItem('theme');
  if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    html.classList.add('dark');
  }

  toggle.addEventListener('click', () => {
    html.classList.toggle('dark');
    localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
  });
</script>

Resumen del proyecto

Este proyecto integra todos los conceptos del curso de Tailwind CSS v4:

  • Navbar: sticky top-0, backdrop-blur-md, hidden md:flex, dark mode toggle
  • Hero: gradientes, blobs decorativos, texto fluido con text-*, CTAs con hover effects
  • Features grid: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3, group-hover:, dark mode
  • Pricing: tarjeta destacada con ring-4, shadow-xl shadow-blue-500/30
  • Testimonios: figure/figcaption semántico, avatares con gradiente
  • Formulario: inputs accesibles con focus-visible:, aria-*, validación visual
  • Footer: grid grid-cols-4, nav aria-label, social links accesibles
  • Dark mode: variante dark: en todos los componentes, toggle con localStorage
  • Accesibilidad: focus-visible:, aria-label, semántica HTML5 correcta, roles implícitos
  • Animaciones: animate-fade-in-up, motion-safe:hover:-translate-y-0.5

¡Felicitaciones por completar el curso de Tailwind CSS v4!

Usa el playground para experimentar
Este proyecto está diseñado para que lo construyas paso a paso. Empieza con la estructura HTML base, luego agrega las utilidades de Tailwind sección por sección. El mejor aprendizaje viene de modificar el código y ver los cambios en tiempo real.
Checklist de calidad: lo que debes verificar
Antes de considerar terminado un proyecto con Tailwind, verifica: 1) Responsivo en 375px, 768px y 1280px. 2) Dark mode funciona correctamente. 3) Todos los botones e inputs tienen focus-visible visible. 4) El contraste de color pasa WCAG AA. 5) Las animaciones respetan motion-reduce.
html
<!DOCTYPE html>
<html lang="es" class="">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DevLearn — Aprende programación</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-white">

  <!-- ===== NAVBAR ===== -->
  <header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-950/80
                 backdrop-blur-md border-b border-gray-100 dark:border-gray-800">
    <nav class="flex items-center justify-between
                max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16">
      <!-- Logo -->
      <a href="/" class="flex items-center gap-2 font-bold text-xl">
        <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600
                    rounded-lg flex items-center justify-center">
          <span class="text-white text-sm font-black">D</span>
        </div>
        DevLearn
      </a>
      <!-- Links desktop -->
      <ul class="hidden md:flex items-center gap-8">
        <li><a href="#cursos"
               class="text-gray-600 dark:text-gray-400 hover:text-gray-900
                      dark:hover:text-white transition-colors font-medium">
          Cursos</a></li>
        <li><a href="#precios"
               class="text-gray-600 dark:text-gray-400 hover:text-gray-900
                      dark:hover:text-white transition-colors font-medium">
          Precios</a></li>
        <li><a href="#testimonios"
               class="text-gray-600 dark:text-gray-400 hover:text-gray-900
                      dark:hover:text-white transition-colors font-medium">
          Testimonios</a></li>
      </ul>
      <!-- Acciones -->
      <div class="flex items-center gap-3">
        <button type="button" id="theme-toggle"
                aria-label="Cambiar tema"
                class="p-2 rounded-lg text-gray-500 hover:bg-gray-100
                       dark:hover:bg-gray-800 transition-colors
                       focus-visible:ring-2 focus-visible:ring-blue-500">
          ☀️
        </button>
        <a href="/login"
           class="hidden sm:inline text-gray-600 dark:text-gray-400
                  hover:text-gray-900 dark:hover:text-white font-medium
                  transition-colors">
          Entrar
        </a>
        <a href="/registro"
           class="bg-blue-600 hover:bg-blue-700 text-white font-semibold
                  px-4 py-2 rounded-xl transition-colors text-sm
                  focus-visible:ring-2 focus-visible:ring-blue-500
                  focus-visible:ring-offset-2">
          Empezar gratis
        </a>
      </div>
    </nav>
  </header>

  <!-- ===== HERO ===== -->
  <section class="relative overflow-hidden
                  bg-gradient-to-b from-blue-50 to-white
                  dark:from-gray-900 dark:to-gray-950
                  pt-20 pb-32 px-4">
    <!-- Fondo decorativo -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-96 h-96
                  bg-blue-400/20 dark:bg-blue-500/10 rounded-full blur-3xl">
      </div>
      <div class="absolute -bottom-20 -left-20 w-80 h-80
                  bg-purple-400/20 dark:bg-purple-500/10 rounded-full blur-3xl">
      </div>
    </div>

    <div class="relative max-w-4xl mx-auto text-center">
      <span class="inline-flex items-center gap-2 bg-blue-50 dark:bg-blue-950
                   text-blue-700 dark:text-blue-300 text-sm font-semibold
                   px-4 py-2 rounded-full border border-blue-200
                   dark:border-blue-800 mb-8">
        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
        Actualizado para 2025 — Tailwind v4, Angular v21
      </span>
      <h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold
                 tracking-tight leading-none mb-6
                 text-gray-900 dark:text-white">
        Aprende a programar<br>
        <span class="bg-gradient-to-r from-blue-500 to-purple-600
                     bg-clip-text text-transparent">
          sin límites
        </span>
      </h1>
      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl
                mx-auto leading-relaxed mb-10">
        Cursos prácticos de desarrollo web impartidos por expertos.
        Aprende a tu ritmo con proyectos reales y comunidad activa.
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="/registro"
           class="bg-blue-600 hover:bg-blue-700 text-white font-bold
                  px-8 py-4 rounded-2xl text-lg transition-all duration-200
                  hover:shadow-lg hover:shadow-blue-500/30 hover:-translate-y-0.5
                  focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
          Empieza gratis hoy
        </a>
        <a href="#cursos"
           class="flex items-center justify-center gap-2
                  border-2 border-gray-200 dark:border-gray-700
                  text-gray-700 dark:text-gray-300 font-bold
                  px-8 py-4 rounded-2xl text-lg
                  hover:border-gray-300 dark:hover:border-gray-600
                  transition-colors">
          Ver cursos →
        </a>
      </div>
      <!-- Stats -->
      <div class="flex flex-wrap justify-center gap-8 mt-16">
        <div class="text-center">
          <p class="text-3xl font-black text-gray-900 dark:text-white">5,000+</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Estudiantes</p>
        </div>
        <div class="text-center">
          <p class="text-3xl font-black text-gray-900 dark:text-white">100+</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Lecciones</p>
        </div>
        <div class="text-center">
          <p class="text-3xl font-black text-gray-900 dark:text-white">4.9/5</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Valoración</p>
        </div>
      </div>
    </div>
  </section>

</body>
</html>