Su primera página con Tailwind
Construya una sección hero sencilla utilizando únicamente clases de utilidad de Tailwind y familiarícese con el flujo de trabajo basado en clases.
Su primera página con Tailwind es una lección gratuita de Tailwind CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Tailwind CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Planning a Hero Section
A hero section is the first thing visitors see: a headline, subheadline, and a button or two. You will build a full one using only Tailwind utilities.
Setting Up the HTML Shell
Start with an HTML shell and link your compiled CSS. Add min-h-screen so the body fills the viewport and bg-gray-50 for a soft canvas to build on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./dist/output.css" rel="stylesheet" />
<title>My First Tailwind Page</title>
</head>
<body class="min-h-screen bg-gray-50">
<!-- content goes here -->
</body>
</html>Creating the Navigation Bar
Build a navbar with flex items-center justify-between to push the logo left and links right. Add bg-white shadow-sm and some padding for a clean, lifted look.
<nav class="bg-white shadow-sm px-8 py-4 flex items-center justify-between">
<span class="text-xl font-bold text-indigo-600">MyBrand</span>
<div class="flex gap-6">
<a href="#" class="text-gray-600 hover:text-indigo-600">Home</a>
<a href="#" class="text-gray-600 hover:text-indigo-600">About</a>
<a href="#" class="text-gray-600 hover:text-indigo-600">Contact</a>
</div>
</nav>Building the Hero Container
Center the hero container with max-w-4xl mx-auto so it stays readable on big screens, then add px-6 py-24 for space and text-center to line everything up.
<section class="px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<!-- headline, subheadline, buttons -->
</div>
</section>Writing the Headline
Write a bold headline: text-5xl font-extrabold for size and weight, text-gray-900 for strong contrast, and tracking-tight so big letters feel cohesive.
<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
Build beautiful UIs
<span class="text-indigo-600">faster than ever</span>
</h1>Adding the Subheadline
Add a subheadline below it: text-xl text-gray-500 keeps it quiet and supporting, max-w-2xl mx-auto holds a comfy line length, and mb-10 spaces the buttons.
<p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
Tailwind CSS lets you design any component directly in your HTML
without writing a single line of custom CSS.
</p>Creating Call-to-Action Buttons
Add two CTA buttons: a filled primary with bg-indigo-600 text-white and an outline secondary. Wrap them in a flex container with a gap to sit side by side.
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
Get Started
</a>
<a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
Learn More
</a>
</div>Adding a Background Gradient
Give the hero depth with a gradient. Use bg-gradient-to-* for direction plus from-* and to-* for colors — a soft from-white to-indigo-50 adds a subtle lift.
<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
<!-- hero content -->
</section>Putting the Hero Together
Here is the full hero with everything combined. Notice the whole design lives in the class names — read them top to bottom and you can picture it exactly.
<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
Build beautiful UIs
<span class="text-indigo-600">faster than ever</span>
</h1>
<p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
Tailwind CSS lets you design any component directly in your HTML.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
Get Started
</a>
<a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
Learn More
</a>
</div>
</div>
</section>Adding a Features Row
Below the hero, add a features row. Use grid grid-cols-1 md:grid-cols-3 gap-8 so cards stack on mobile and sit side by side on larger screens.
<section class="max-w-5xl mx-auto px-6 py-16">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-6">
<div class="text-4xl mb-4">⚡</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Fast</h3>
<p class="text-gray-500 text-sm">JIT compilation generates only what you use.</p>
</div>
<!-- repeat for other features -->
</div>
</section>Finishing With a Footer
Finish with a footer: bg-gray-800 text-gray-400 for a dark contrast and text-center py-8 to keep it compact. That is a full page, built only with utilities.
<footer class="bg-gray-800 text-gray-400 text-center py-8">
<p class="text-sm">© 2024 MyBrand. Built with Tailwind CSS.</p>
</footer>Quick Check
Quick check! See how your first page came together. 🎨
Lesson Recap
You built a real page! A hero blends layout, type, and color, gradients use from-* and to-*, and flex and grid handle columns. Next up: Tailwind vs CSS.
Preguntas frecuentes
¿La lección «Su primera página con Tailwind» es gratis?
Sí — el texto completo de «Su primera página con Tailwind» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Tailwind CSS Academy, actualiza a CoddyKit PRO. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Su primera página con Tailwind»?
Construya una sección hero sencilla utilizando únicamente clases de utilidad de Tailwind y familiarícese con el flujo de trabajo basado en clases. Practicas Tailwind CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Tailwind CSS Academy?
No se requiere experiencia previa. Tailwind CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Su primera página con Tailwind»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Tailwind CSS Academy?
Sí. Cada lección de Tailwind CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- CSS basado en utilidades explicado
- Instalación y configuración de Tailwind
- Su primera página con Tailwind
- Tailwind frente al CSS tradicional