Crie uma Landing Page do zero com Tailwind CSS
- Última atualização em 1, Julho de 2023.
- Escrito por Doctor X
Tailwind CSS é uma framework CSS poderosa e altamente personalizável que usa uma abordagem "utility-first" para a estilização. Neste artigo, vamos construir uma landing page do zero, usando apenas Tailwind CSS. Vamos focar em uma landing page para um produto fictício, digamos, um aplicativo de meditação chamado "MeditApp".
Configuração inicial
Antes de começar, precisamos configurar um novo projeto com Tailwind. Você pode fazer isso configurando um novo projeto com webpack, Parcel, ou qualquer outra ferramenta de build que você prefira. Para este tutorial, vamos supor que você já configurou Tailwind em seu projeto.
Estrutura da Landing Page
Nossa landing page será composta pelas seguintes seções:
- Cabeçalho (Header)
- Hero Section
- Benefícios
- Depoimentos
- Área de vídeo
- Call-to-action (CTA)
- Rodapé (Footer)
Vamos começar.
1. Cabeçalho
O cabeçalho geralmente contém o logotipo do produto e o menu de navegação. Neste exemplo, teremos apenas um logotipo.
<header class="py-5 bg-blue-500 text-white">
<div class="container mx-auto flex items-center justify-between">
<h1 class="text-3xl font-bold">MeditApp</h1>
</div>
</header>Aqui, py-5 adiciona um padding vertical, bg-blue-500 define a cor de fundo, e text-white define a cor do texto. mx-auto centraliza o container, flex torna o container em um container flex, e items-center e justify-between são utilitários flexbox para alinhar e justificar os itens.
2. Hero Section
A seção Hero geralmente contém o título principal, uma breve descrição e um botão ou formulário de call-to-action.
<section class="py-10">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-4">Relaxe e Medite com o MeditApp</h2>
<p class="text-xl text-center mb-8">Nossa aplicação oferece a melhor experiência em meditação, ajudando você a se conectar com sua paz interior.</p>
<div class="flex justify-center">
<a href="#" class="bg-blue-500 text-white px-5 py-3 rounded">Comece Agora</a>
</div>
</div>
</section>3. Benefícios
Na seção de benefícios, vamos listar alguns benefícios do nosso aplicativo.
<section class="py-10 bg-blue-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-6">Por que o MeditApp?</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="text-center">
<h3 class="text-xl font-bold mb-2">Benefício 1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="text-center">
<h3 class="text-xl font-bold mb-2">Benefício 2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="text-center">
<h3 class="text-xl font-bold mb-2">Benefício 3</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</section>Aqui, estamos usando grid-cols-1 md:grid-cols-2 lg:grid-cols-3 para criar um grid responsivo que tem uma coluna em telas pequenas, duas colunas em telas médias e três colunas em telas grandes.
4. Depoimentos
Na seção de depoimentos, vamos listar alguns depoimentos de usuários.
<section class="py-10">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-6">Depoimentos</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 bg-blue-100 rounded">
<p>Lorem ipsum dolor sit amet.</p>
<h3 class="text-xl font-bold mt-2">Nome do Usuário</h3>
</div>
<div class="p-4 bg-blue-100 rounded">
<p>Lorem ipsum dolor sit amet.</p>
<h3 class="text-xl font-bold mt-2">Nome do Usuário</h3>
</div>
</div>
</div>
</section>5. Área de vídeo
Vamos adicionar uma seção de vídeo onde você pode colocar um vídeo promocional do produto.
<section class="py-10">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-center mb-6">Veja o MeditApp em ação</h2>
<div class="flex justify-center">
<iframe src="https://www.youtube.com/embed/seuVideo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="w-full max-w-2xl"></iframe>
</div>
</div>
</section>6. Call-to-action (CTA)
Vamos adicionar uma seção de CTA para incentivar os usuários a fazer algo, como se inscrever ou baixar o aplicativo.
<section class="py-10 bg-blue-500 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-center mb-4">Pronto para começar a meditar?</h2>
<p class="text-xl text-center mb-8">Inscreva-se agora e comece a jornada da meditação.</p>
<div class="flex justify-center">
<a href="#" class="bg-white text-blue-500 px-5 py-3 rounded">Inscreva-se</a>
</div>
</div>
</section>7. Rodapé
Finalmente, vamos adicionar um rodapé com alguns links e créditos.
<footer class="py-5 bg-blue-900 text-white">
<div class="container mx-auto px-4 text-center">
<p>© 2023 MeditApp. Todos os
direitos reservados.</p>
</div>
</footer>Código Completo
Aqui está o código completo da nossa landing page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MeditApp</title>
<link href="/path/to/your/tailwind.css" rel="stylesheet">
</head>
<body>
<header class="py-5 bg-blue-500 text-white">
<div class="container mx-auto flex items-center justify-between">
<h1 class="text-3xl font-bold">MeditApp</h1>
</div>
</header>
<section class="py-10">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-4">Relaxe e Medite com o MeditApp</h2>
<p class="text-xl text-center mb-8">Nossa aplicação oferece a melhor experiência em meditação, ajudando você a se conectar com sua paz interior.</p>
<div class="flex justify-center">
<a href="#" class="bg-blue-500 text-white px-5 py-3 rounded">Comece Agora</a>
</div>
</div>
</section>
<section class="py-10 bg-blue-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-6">Por que o MeditApp?</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="text-center">
<h3 class="text-xl font-bold mb-2">Benefício 1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="text-center">
<h3 class="text-xl font-bold mb-2">Benefício 2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="text-center">
<h3 class="text-xl font-bold mb-2">Benefício 3</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</section>
<section class="py-10">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-6">Depoimentos</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 bg-blue-100 rounded">
<p>Lorem ipsum dolor sit amet.</p>
<h3 class="text-xl font-bold mt-2">Nome do Usuário</h3>
</div>
<div class="p-4 bg-blue-100 rounded">
<p>Lorem ipsum dolor sit amet.</p>
<h3 class="text-xl font-bold mt-2">Nome do Usuário</h3>
</div>
</div>
</div>
</section>
<section class="py-10">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-center mb-6">Veja o MeditApp em ação</h
2>
<div class="flex justify-center">
<iframe src="https://www.youtube.com/embed/seuVideo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="w-full max-w-2xl"></iframe>
</div>
</div>
</section>
<section class="py-10 bg-blue-500 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-center mb-4">Pronto para começar a meditar?</h2>
<p class="text-xl text-center mb-8">Inscreva-se agora e comece a jornada da meditação.</p>
<div class="flex justify-center">
<a href="#" class="bg-white text-blue-500 px-5 py-3 rounded">Inscreva-se</a>
</div>
</div>
</section>
<footer class="py-5 bg-blue-900 text-white">
<div class="container mx-auto px-4 text-center">
<p>© 2023 MeditApp. Todos os direitos reservados.</p>
</div>
</footer>
</body>
</html>Espero que este tutorial tenha ajudado a entender como usar Tailwind CSS para criar uma landing page. Com este conhecimento, você deve ser capaz de explorar mais o Tailwind e criar designs ainda mais complexos.