Cree una página de destino responsiva con Tailwind CSS
Aprenda a crear una página de destino hermosa y receptiva con Tailwind CSS, el popular marco CSS. Este tutorial paso a paso le enseñará todo lo que necesita saber, desde configurar su proyecto hasta agregar su contenido y diseñar su página. También aprenderá a utilizar Tailwind CSS para crear una página de destino optimizada para conversiones.
La hoja de estilo en cascada (CSS) se utiliza para crear sitios web estéticamente atractivos. CSS son reglas de estilo que se aplican a una página web para que se vea hermosa. Cada vez que se muestra una página web, el navegador la muestra junto con las reglas CSS definidas.
Al crear sitios web o aplicaciones grandes, puede resultar tedioso escribir estas reglas desde cero, de ahí la disponibilidad de múltiples marcos CSS que lo hacen fácil. Vienen con reglas CSS predefinidas existentes y todo lo que necesitas hacer es simplemente aplicarlas a tu página web. Ejemplos de algunos marcos CSS populares incluyen Bootstrap , Foundation , Bulma , Pure , Materialize , etc.
Saluda a Tailwind CSS
Tailwind CSS es un marco CSS relativamente nuevo que está cambiando completamente el juego. Tailwind es diferente de los marcos CSS enumerados anteriormente porque no tiene un tema predeterminado y no hay componentes de interfaz de usuario integrados. Tailwind es un marco CSS de utilidad para crear rápidamente interfaces de usuario personalizadas. Esto significa que si está buscando un marco que venga con un menú de widgets prediseñados para construir su sitio, es posible que Tailwind no sea el marco adecuado para usted. En cambio, Tailwind proporciona clases de utilidades de bajo nivel y altamente componibles que facilitan la creación de interfaces de usuario complejas sin alentar a que dos sitios tengan el mismo aspecto.
Lo que estaremos construyendo
En este tutorial, crearemos una página de inicio simple pero hermosa para mostrar un producto de reloj de pulsera inteligente (HMSW) de monitoreo de salud a nuestros clientes.
Nuestra página de inicio se dividirá en lo siguiente:
- Barra de navegación
- Sección de héroe
- Sección de características
- Testimonios
- Llamada a la acción
- Pie de página
Puede descargar los recursos para este proyecto aquí .
Empezando
Comenzaremos creando un nuevo directorio de proyecto, al que llamaremos hmswy crearemos un index.htmlarchivo dentro de él.
$ mkdir hmsw && cd hmsw
$ touch index.html
Para comenzar a usar Tailwind CSS rápidamente, tomaremos la última compilación de configuración predeterminada a través de CDN. Agregue el siguiente fragmento a index.html:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smart Health Monitoring Wristwatch</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet" />
</head>
<body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif">
</body>
</html>
Le damos al cuerpo un fondo blanco. Además, extraemos la fuente fuente sans pro de las fuentes de Google.
Muchas de las características que hacen que Tailwind CSS sea excelente no están disponibles mediante las compilaciones CDN. Para aprovechar al máximo las funciones de Tailwind CSS, instale Tailwind a través de npm.
Construyendo la barra de navegación
La barra de navegación se dividirá en dos columnas: la primera columna contendrá nuestro logotipo y la segunda columna contendrá nuestros enlaces de navegación. Pegue el siguiente código inmediatamente después <body>:
<!-- index.html -->
<nav>
<div class="container mx-auto px-6 py-2 flex justify-between items-center">
<a class="font-bold text-2xl lg:text-4xl" href="#">
SHMW
</a>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div class="hidden lg:block">
<ul class="inline-flex">
<li><a class="px-4 font-bold" href="/">Home</a></li>
<li><a class="px-4 hover:text-gray-800" href="#">About</a></li>
<li><a class="px-4 hover:text-gray-800" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Agregar .containerestablece el max-widthde un elemento para que coincida con el min-widthdel punto de interrupción actual, y para centrar el contenedor, agregamos .mx-autoy .px-6para tener relleno en ambos lados (izquierdo y derecho). Como queremos una barra de navegación horizontal, configuramos la visualización del contenedor flexy especificamos cómo se deben mostrar los elementos. Es decir, cada elemento debe tener la misma cantidad de espacio entre ellos (usando .justify-between), lo que llevará ambas columnas al extremo, y deben estar centradas verticalmente (usando .items-center). Por último, agregamos relleno tanto en la parte superior como en la inferior del contenedor usando .py-2.
La primera columna contiene el logotipo de nuestra empresa (en nuestro caso, solo un texto) en la barra de navegación. Para la segunda columna, queremos que los enlaces se muestren de manera diferente en dispositivos móviles y en computadoras de escritorio. Así que tenemos un divque contiene un botón para el menú de nuestro móvil, que sólo será visible en dispositivos de pantalla pequeña. Para lograrlo agregamos ambos .blocky .lg:hidden, lo que hará que el botón sea visible en dispositivos móviles y oculto en pantallas grandes.
De forma predeterminada, Tailwind CSS adopta un primer enfoque móvil, por lo que construimos desde una pantalla pequeña hasta una pantalla más grande.
Luego, para los enlaces de escritorio, agregamos .hiddeny .lg:block, lo cual hacemos directamente a la inversa de lo anterior. Para los enlaces reales, para que parezcan horizontales, agregamos .inline-flex. Para enlaces individuales, les damos acolchado en ambos lados. Para indicar el enlace activo (en nuestro caso, el enlace de inicio), ponemos el texto en negrita. Para el resto de enlaces, utilizamos un tono de gris más oscuro una vez que se pasa el cursor sobre los enlaces.
Construyendo la sección de héroes
La sección Hero mostrará información sobre nuestro reloj de pulsera inteligente de monitoreo de salud y un botón de llamada a la acción para que los usuarios tomen medidas inmediatas. Agregue el fragmento de código inmediatamente después de la barra de navegación:
<!-- index.html -->
<div class="py-20" style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%)"
>
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold mb-2 text-white">
Smart Health Monitoring Wristwatch!
</h2>
<h3 class="text-2xl mb-8 text-gray-200">
Monitor your health vitals smartly anywhere you go.
</h3>
<button class="bg-white font-bold rounded-full py-4 px-8 shadow-lg uppercase tracking-wider">
Pre Order
</button>
</div>
</div>
Esto es bastante sencillo, comenzamos agregando relleno tanto en la parte superior como en la inferior, luego configuramos un degradado de fondo. Para el botón de llamada a la acción, le damos un color de fondo blanco, ponemos el texto en negrita, le damos un poco de relleno, lo convertimos en una pastilla dándole bordes completamente redondeados. Por último, le damos un poco de sombra y ponemos el texto en mayúsculas.
Construyendo la sección de características
Agregue lo siguiente inmediatamente después de la sección de héroe:
<!-- index.html -->
<section class="container mx-auto px-6 p-10">
<h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
Features
</h2>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">Exercise Metric</h4>
<p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch is able to capture you vitals while you exercise. You can create different category of exercises and can track your vitals on the go.</p>
</div>
<div class="w-full md:w-1/2">
<img src="assets/health.svg" alt="Monitoring" />
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<img src="assets/report.svg" alt="Reporting" />
</div>
<div class="w-full md:w-1/2 pl-10">
<h4 class="text-3xl text-gray-800 font-bold mb-3">Reporting</h4>
<p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch can generate a comprehensive report on your vitals depending on your settings either daily, weekly, monthly, quarterly or yearly.</p>
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">Syncing</h4>
<p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch allows you to sync data across all your mobile devices whether iOS, Android or Windows OS and also to your laptop whether MacOS, GNU/LInux or Windows OS.</p>
</div>
<div class="w-full md:w-1/2">
<img src="assets/sync.svg" alt="Syncing" />
</div>
</div>
</section>
Las funciones en sí se muestran en una cuadrícula de dos columnas: el texto de la función y la imagen que la acompaña. Luego, en los dispositivos móviles queremos que se apilen uno encima del otro. Usamos flexbox para construir nuestra grilla.
Construyendo la sección de testimonios
Este contendrá tarjetas de algunos de los testimonios de nuestros usuarios. La tarjeta contendrá el testimonio del usuario y su nombre. Así que agregue lo siguiente inmediatamente después de la sección de características:
<!-- index.html -->
<section class="bg-gray-100">
<div class="container mx-auto px-6 py-20">
<h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
Testimonials
</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">Monitoring and tracking my health vitals anywhere I go and on any platform I use has never been easier.</p>
<p class="text-gray-500 text-xs md:text-sm px-6">John Doe</p>
</div>
</div>
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">As an Athlete, this is the perfect product for me. I wear my Smart Health Monitoring Wristwatch everywhere i go, even in the bathroom since it's waterproof.</p>
<p class="text-gray-500 text-xs md:text-sm px-6">Jane Doe</p>
</div>
</div>
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">I don't regret buying this wearble gadget. One of the best gadgets I own!.</p>
<p class="text-gray-500 text-xs md:text-sm px-6">James Doe</p>
</div>
</div>
</div>
</div>
</section>
Primero, le damos un fondo a la sección y, al igual que nuestras otras secciones, la centramos en la página. Para los testimonios reales, queremos que aparezcan en una cuadrícula. Nuevamente usamos flexbox. Queremos que se apilen (es decir, que ocupen todo el ancho de la pantalla) uno sobre el otro cuando se vean en dispositivos móviles, por lo tanto .w-full. Luego, en una pantalla más grande, queremos que se muestren en tres columnas usando .md:w-1/3. Para las tarjetas individuales le damos un fondo blanco, bordes redondeados y sombras.
Construyendo el llamado a la acción
La sección de llamado a la acción es necesaria para que nuestros usuarios puedan tomar medidas inmediatas después de leer las características de nuestro producto y también los testimonios de nuestros usuarios de demostración. Agregue lo siguiente inmediatamente después de la sección de testimonios:
<!-- index.html -->
<section style="background-color: #667eea">
<div class="container mx-auto px-6 text-center py-20">
<h2 class="mb-6 text-4xl font-bold text-center text-white">
Limited in Stock
</h2>
<h3 class="my-4 text-2xl text-white">
Get yourself the Smart Health Monitoring Wristwatch!
</h3>
<button
class="bg-white font-bold rounded-full mt-6 py-4 px-8 shadow-lg uppercase tracking-wider"
>
Pre Order
</button>
</div>
</section>
Construyendo el pie de página
El pie de página contendrá enlaces adicionales como el blog, la política de privacidad, las redes sociales, etc. Agregue lo siguiente inmediatamente después de la sección de llamado a la acción:
<!-- index.html -->
<footer class="bg-gray-100">
<div class="container mx-auto px-6 pt-10 pb-6">
<div class="flex flex-wrap">
<div class="w-full md:w-1/4 text-center md:text-left">
<h5 class="uppercase mb-6 font-bold">Links</h5>
<ul class="mb-4">
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">FAQ</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Help</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Support</a>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left">
<h5 class="uppercase mb-6 font-bold">Legal</h5>
<ul class="mb-4">
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Terms</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Privacy</a>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left">
<h5 class="uppercase mb-6 font-bold">Social</h5>
<ul class="mb-4">
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Facebook</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Linkedin</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Twitter</a>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left">
<h5 class="uppercase mb-6 font-bold">Company</h5>
<ul class="mb-4">
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Official Blog</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">About Us</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
Mostramos un montón de enlaces en una cuadrícula de cuatro columnas. Cada columna se apilará una sobre otra y el texto se centrará cuando se vea en pantallas pequeñas.
Poniendo todo junto
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smart Health Monitoring Wristwatch</title>
<link
rel="stylesheet"
href="https://unpkg.com/tailwindcss@next/dist/tailwind.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700"
rel="stylesheet"
/>
</head>
<body
class="text-gray-700 bg-white"
style="font-family: 'Source Sans Pro', sans-serif"
>
<!--Nav-->
<nav>
<div
class="container mx-auto px-6 py-2 flex justify-between items-center"
>
<a
class="font-bold text-2xl lg:text-4xl"
href="#"
>
SHMW
</a>
<div class="block lg:hidden">
<button
class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none"
>
<svg
class="fill-current h-3 w-3"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div class="hidden lg:block">
<ul class="inline-flex">
<li>
<a class="px-4 font-bold" href="/">Home</a>
</li>
<li>
<a class="px-4 hover:text-gray-800" href="#"
>About</a
>
</li>
<li>
<a class="px-4 hover:text-gray-800" href="#"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!--Hero-->
<div
class="py-20"
style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%)"
>
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold mb-2 text-white">
Smart Health Monitoring Wristwatch!
</h2>
<h3 class="text-2xl mb-8 text-gray-200">
Monitor your health vitals smartly anywhere you go.
</h3>
<button
class="bg-white font-bold rounded-full py-4 px-8 shadow-lg uppercase tracking-wider"
>
Pre Order
</button>
</div>
</div>
<!-- Features -->
<section class="container mx-auto px-6 p-10">
<h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
Features
</h2>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">
Exercise Metrics
</h4>
<p class="text-gray-600 mb-8">
Our Smart Health Monitoring Wristwatch is able to capture you vitals
while you exercise. You can create different category of exercises
and can track your vitals on the go.
</p>
</div>
<div class="w-full md:w-1/2">
<img src="assets/health.svg" alt="Monitoring" />
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<img src="assets/report.svg" alt="Reporting" />
</div>
<div class="w-full md:w-1/2 pl-10">
<h4 class="text-3xl text-gray-800 font-bold mb-3">
Reporting
</h4>
<p class="text-gray-600 mb-8">
Our Smart Health Monitoring Wristwatch can generate a comprehensive
report on your vitals depending on your settings either daily,
weekly, monthly, quarterly or yearly.
</p>
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">
Syncing
</h4>
<p class="text-gray-600 mb-8">
Our Smart Health Monitoring Wristwatch allows you to sync data
across all your mobile devices whether iOS, Android or Windows OS
and also to your laptop whether MacOS, GNU/LInux or Windows OS.
</p>
</div>
<div class="w-full md:w-1/2">
<img src="assets/sync.svg" alt="Syncing" />
</div>
</div>
</section>
<!-- Testimonials -->
<section class="bg-gray-100">
<div class="container mx-auto px-6 py-20">
<h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
Testimonials
</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">
Monitoring and tracking my health vitals anywhere I go and on
any platform I use has never been easier.
</p>
<p class="text-gray-500 text-xs md:text-sm px-6">
John Doe
</p>
</div>
</div>
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">
As an Athlete, this is the perfect product for me. I wear my
Smart Health Monitoring Wristwatch everywhere i go, even in the
bathroom since it's waterproof.
</p>
<p class="text-gray-500 text-xs md:text-sm px-6">
Jane Doe
</p>
</div>
</div>
<div class="w-full md:w-1/3 px-2 mb-4">
<div class="bg-white rounded shadow py-2">
<p class="text-gray-800 text-base px-6 mb-5">
I don't regret buying this wearble gadget. One of the best
gadgets I own!.
</p>
<p class="text-gray-500 text-xs md:text-sm px-6">
James Doe
</p>
</div>
</div>
</div>
</div>
</section>
<!--Call to Action-->
<section style="background-color: #667eea">
<div class="container mx-auto px-6 text-center py-20">
<h2 class="mb-6 text-4xl font-bold text-center text-white">
Limited in Stock
</h2>
<h3 class="my-4 text-2xl text-white">
Get yourself the Smart Health Monitoring Wristwatch!
</h3>
<button
class="bg-white font-bold rounded-full mt-6 py-4 px-8 shadow-lg uppercase tracking-wider"
>
Pre Order
</button>
</div>
</section>
<!--Footer-->
<footer class="bg-gray-100">
<div class="container mx-auto px-6 pt-10 pb-6">
<div class="flex flex-wrap">
<div class="w-full md:w-1/4 text-center md:text-left ">
<h5 class="uppercase mb-6 font-bold">Links</h5>
<ul class="mb-4">
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>FAQ</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Help</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Support</a
>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left ">
<h5 class="uppercase mb-6 font-bold">Legal</h5>
<ul class="mb-4">
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Terms</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Privacy</a
>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left ">
<h5 class="uppercase mb-6 font-bold">Social</h5>
<ul class="mb-4">
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Facebook</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Linkedin</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Twitter</a
>
</li>
</ul>
</div>
<div class="w-full md:w-1/4 text-center md:text-left ">
<h5 class="uppercase mb-6 font-bold">Company</h5>
<ul class="mb-4">
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Official Blog</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>About Us</a
>
</li>
<li class="mt-2">
<a
href="#"
class="hover:underline text-gray-600 hover:text-orange-500"
>Contact</a
>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
Conclusión
Hemos visto cómo crear una página de destino simple pero hermosa con Tailwind CSS. Además de simplemente usar las clases que ofrece Tailwind, también usamos colores degradados para hacer que la página de destino sea más estética. Para obtener más información sobre Tailwind CSS, puede leer la documentación en su sitio web oficial.
¡Gracias por leer!
#tailwindcss #tailwind