Tutorial
How To Build a Styled Landing Page with Tailwind CSS
Introduction
Developers use Cascading Style Sheets (CSS) to style websites. But often, when building large websites or apps, it becomes tedious to write these rules from scratch. This is why there are multiple CSS frameworks to help make writing CSS easy, such as Bootstrap, Foundation, Bulma, Pure, Materialize, etc.
Tailwind CSS is a framework that is somewhat different from the ones previously mentioned, because it doesn’t have a default theme, and there are no built-in UI components. Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. This means that if you’re looking for a framework with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you. Instead, Tailwind provides highly composable, low-level utility classes that make it easier to build complex user interfaces without encouraging any two sites to look the same.
In this tutorial, you’ll build a landing page to showcase a smart health monitoring wristwatch (SHMW) product to customers.
The final product will look like the following:
The landing page will be divided into the following:
- Navbar
- Hero section
- Features section
- Testimonials
- Call to action
- Footer
You can download the assets for this project at this GitHub page.
Prerequisites
A basic understanding of CSS may be helpful, but is not required.
Step 1 — Setting up the Project
We’ll start by creating a new project directory, which we’ll call shmw and create an index.html file inside it.
- mkdir shmw
- cd shmw
- nano index.html
To get up and running quickly with Tailwind CSS, we’ll grab the latest default configuration build via CDN (Content Delivery Network). Add the following snippet to 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" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif">
</body>
</html>
In this snippet, you gave the body a white background and pulled the Source Sans Pro font from Google Fonts.
Note: Many of the features of Tailwind CSS are not available using the CDN builds. To take full advantage of Tailwind CSS features, install Tailwind via npm.
Step 2 — Building the Navbar
The navbar will be divided into two columns. The first column will hold the logo and the second column will hold the navigation links. Add the following code immediately after <body> in the index.html file:
<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>
Adding .container sets the max-width of an element to match the min-width of the current breakpoint. To make the container centered, you add .mx-auto and .px-6 to have padding on both sides (left and right). Since we want a horizontal navbar, we set the container display to flex and specify how its items should be displayed. Each item should have an equal amount of space between them (using .justify-between), which will push both columns to the edge. They will be vertically centered (using .items-center). Lastly, we add padding to both the top and bottom of the container using .py-2.
The first column holds our business logo (in this case, just text) on the navbar. For the second column, we want the links to be displayed differently on mobile and desktop. We have a div containing a button for our mobile menu, which will only be visible on small screen devices. To achieve this, we add both .block and .lg:hidden, which will make the button visible on mobile devices and hidden on large screens.
Note: By default, Tailwind CSS takes a mobile-first approach, so we build it from a small screen to a larger screen.
Next, for the desktop links, we add .hidden and .lg:block, which we do the direct inverse of the above. For the actual links, we add .inline-flex to make the links appear horizontal. For individual links, we give them padding on both sides. To indicate the active link (in our case, the home link), we make the text bold. For the rest of the links, we use a darker shade of gray once the links are hovered over.
Step 3 — Building the Hero Section
The Hero section will display information about our smart health monitoring wristwatch and a call to action button for the users to take immediate action. Add this code snippet immediately after the navbar:
<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>
We start by adding padding to both the top and bottom, and then we set a background gradient. For the call to action button, we give it a white background color, make the text bold, give it some padding, and make it pill-shaped by giving it fully rounded borders. Lastly, we give it some shadow and make the text uppercase.
Now that you’ve made the hero section, you’re ready to build the features section.
Step 4 — Building the Features Section
In this step, you will build a section that will list out the notable features of the device.
Add the following immediately after the hero section:
<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>
The features themselves are displayed in a grid of two columns: the feature text and the accompanying image. On mobile devices, we stack on top of one another. We use flexbox to build our grid.
Step 5 — Building the Testimonials Section
In this step, you will build the testimonial section that will contain cards of some of the testimonies. The card will contain the user’s testimony and the user’s name.
Add the following immediately after the features section:
<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>
First, we give the section a background and center it on the page. For the actual testimonies, we make them appear in a grid with flexbox. We want them to stack (that is, take the full width of the screen) on one another when viewed on mobile devices, hence .w-full. Then, on larger screens, we want them to be displayed in three columns using .md:w-1/3. For the individual cards, we give white background, rounded borders, and shadow.
Step 6 — Building the Call to Action
The call to action section is needed so our users can take immediate action after reading the features of our product and the testimonials from the demo users. Add the following immediately after the testimonials section:
<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>
Now that you’ve created the call to action, you’re ready to build the footer.
Step 7 — Building the Footer
The footer will contain extra links like a blog, privacy policy, social media, etc. Add the following immediately after the call to action section:
<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>
This code displays a bunch of links in a grid of four columns. Each column will stack on one another, and the text will be centered when viewed on small screens.
With that, you have completed your landing page. The completed index.html file will look as follows:
<!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>
Conclusion
In this tutorial, you built a landing page with Tailwind CSS. In addition to using the classes that Tailwind provides, you also used gradient colors to make the landing page have more depth. To learn more about Tailwind CSS, you can read the documentation on their official website.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
author
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.
According to the screenshots shown in this post, I believe using
items-centerin the Feature section is not correct. From the picture in Step 4, the text starts at the same level as the top of an image. I think the correct class to use should beitems-start.In order to make this properly work on mobile, you need to add the following meta tag to the header section:
<meta name=“viewport” content=“width=device-width, initial-scale=1”>