1593072179
How To Build a Styled Landing Page with Tailwind CSS
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:
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:
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>
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:
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>
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:
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>
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
#tailwindcss #css #web-development #developer
What is GEEK
Buddha Community
1605064642
Design A Landing Page using Tailwind CSS
When I started learning how to use the Tailwind CSS library, I really didn’t know what to expect and wasn’t quite sure how I’d fare with the library. It turns out, TailWind’s a whole lot easier to use than I thought and makes designing a landing page a breeze.
One remarkable feature I noticed was the ease with which I could define classes for various responsive breakpoints without writing a single line of CSS media queries. That for me was awesome!
For this tutorial, I’ll assume you have a Tailwind project set up, if you don’t you can grab one here. For the fonts, I’m using Poppins. All the code presented here should be placed in your body tag.
We’ll start off with creating and styling the main element that would house the hero section:
<main class="h-full flex items-center px-6 lg:px-32 bg-purple-900 text-white">
</main>
The Tailwind classes added to the main element does the following:
- h-full: Give the main element a height of 100%. Pretty much like what you’d do with a style declaration of height: 100vh in CSS.
- flex: Make the main element a flexbox, just like you would with a style declaration like display: flex in CSS.
- items-center: Position the contents of the main element in the center of the main element, just like you would with align-items: center in CSS.
- px-6 lg:px-32: Assign horizontal padding of 1.5rem to all devices from mobile to medium and horizontal padding of 8rem for devices from large to devices beyond. You can add as many other breakpoints to suit your design needs, this is the wonderful thing about Tailwind.
- bg-purple-900: Gives the main element a purple background with an opacity of 90%. This is equivalent to background-color: purple in CSS.
- text-white: Gives the main section and its child elements a default white color (#FFFFFF).
#tailwind #design #tailwind-css #web #css
1624705980
How To Build an About Me Page With Laravel Sail and Tailwind CSS
Introduction
Laravel Sail is a Docker development environment included by default in Laravel since version 8. It allows you to quickly get a PHP development environment up and running, tailored for running Laravel applications with built-in support for NPM / Node.
In this guide, you’ll bootstrap a new Laravel application with Laravel Sail and create a styled “about me” landing page using Tailwind CSS, a utility-first CSS framework designed for rapidly building custom user interfaces. At the end, you’ll have a base that you can use to further develop a Laravel application using Tailwind CSS for the front end and Sail for the development environment.
Prerequisites
Although the code shared in this guide should work seamlessly across multiple environments and systems, the instructions explained here were tested within an Ubuntu 20.04 local system running Docker and Docker Compose. Regardless of your base operating system, here’s what you’ll need to set up in order to get started:
-
Docker installed on your local machine. If you’re running Ubuntu 20.04, you can follow Steps 1 and 2 of How To Install and Use Docker on Ubuntu 20.04 to set it up. Windows and MacOS users need to install Docker Desktop instead.
-
Docker Compose installed on your local machine. Docker Compose comes included by default with Docker Desktop for both Windows and MacOS systems, but Linux users need to install the Compose executable, following Step 1 of How To Install and Use Docker Compose on Ubuntu 20.04.
-
A code editor for PHP (optional). A code editor helps making code easier to read and to format, and can improve your productivity by pointing out issues before you execute your code. You can follow our guide on How To Set Up Visual Studio Code for PHP Projects to set up VSCode, a free code editor, within your local development environment.
-
Step 1 — Creating a New Laravel Application Using the Laravel Builder Script
-
Step 2 — Using Laravel Sail
-
Step 3 — Setting Up Tailwind CSS with Laravel
-
Step 4 — Creating a Landing Page
-
Step 5 — Styling Your Landing Page with Tailwind CSS
#tailwind css #laravel #css #tailwind
1623482596
How To Create A Stylish Email Capture Page In Tailwind CSS
Ah the classic email capture page. Just like chocolate, it’s a flavor that we all need it at some point. So it’s good to have some options ready to go when that does happen.
For this tutorial we will be building out a simple email capture page with Next.js and TailwindCSS.
If you just want to skip to the final code you can find that here.
Setup
We will start by cloning the official Next.js + TailwindCSS example repo. This will make getting setup much easier. You can find this repo here.
You can follow the instructions in the ReadMe or just run the following command locally (I am using Yarn but you can switch to npm if you prefer):
yarn create next-app --example with-tailwindcss with-tailwindcss-app
This will pull down the example to your local drive in a folder called with-tailwindcss-app. You can rename it however you like and link it to your own Github repo (comes in handy when you want to deploy).
Start Your Engines
Run the following command to start up our app:
yarn
Cleanup
Best to start with an empty slate. Let’s go in and clear out all of the divs in the return statement of index.js (our main page). You can leave the Head part in if you want (this only impacts SEO/ what the title will be in the tab).
Add Background Image
We want a full screen background image. For this we will make our main tag relative and then absolutely position our image to cover the whole space. For the image I will use the awesome Unsplash Random API (also makes it more fun with images changing on every refresh). You can change this to whichever image url you want.
<main className='relative h-screen w-screen'>
<img
src='https://source.unsplash.com/random'
alt='main background image'
className='absolute inset-0 w-full h-full object-cover'
/>
</main>
Alright so now we have an image covering our page.
Add Hero Content
Let’s add in our content now. Keeping it simple we want a headline, a supporting paragraph and a call to action. Our call to action will be a email subscription form.
Let’s create a new component called HeroContent for this.
<div className='absolute inset-0 flex justify-center items-center'
<div className='w-full max-w-md'
<h1 className='text-center text-3xl sm:text-4xl font-extrabold
sm:leading-[3rem]'>
Your headline here.{' '}
<span className='text-yellow-400'>Catch their attention!</span
</h1>
<p className='mt-6 text-lg sm:text-xl'>
Ea esse minim reprehenderit voluptate. Ea nisi culpa magna...
</p>
</div>
</div>
We used position absolute to span the whole div. Then we used flex to center the div containing our content. We restricted it’s width with a max-w-md class.
For formatting we added some classes to make our text bigger and added a little color to make the headline more catchy. :D
#nextjs #web-design #tailwind-css #landing-pages #css
1587531840
How to Build a 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 that comes 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 easy to build complex user interfaces without encouraging any two sites to look the same.
In this tutorial, we’ll be building a landing page to showcase a health monitoring smart wristwatch (HMSW) product to our customers.
The final product will look like the following:
Our landing page will be divided into the following:
- Navbar
- Hero section
- Features section
- Testimonials
- Call to action
- Footer
Step 1 — Setting Up the Project
We’ll start by creating a new project directory, which we’ll call hmsw and create an index.html file inside it.
mkdir hmsw && cd hmsw
touch index.html
To get up and running quickly with Tailwind CSS, we’ll grab the latest default configuration build via CDN. Add the following snippet to 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" />
<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>
We gave the body a background of white. Also, we 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 column: the first column will hold our logo and the second column will hold our navigation links. Add the following code immediately after <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>
Adding .container sets the max-width of an element to match the min-width of the current breakpoint, and to make the container centered, we add .mx-auto and .px-6 to have padding on both sides (left and right). Since we want a horizontal navbar, we set the display of the container to flex and specify how its items should be displayed. That is, each item should have equal amount of space in 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 our case just a text) on the navbar. For the second column, we want the links to be displayed differently on mobile and on 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 from small screen and to larger screen.
Then for the desktop links, we add .hidden and .lg:block, which we do the direct inverse of the above. For the actual links, to make the links appear horizontal, we add .inline-flex. 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 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:
<!-- 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>
We start by adding padding to both the top and bottom, then we set a background gradient. For the call to action button, we give it a background color of white, make the text bold, give it some padding, and make it a pill by giving it fully rounded borders. Lastly, we give it some shadow and make the text uppercase.
Step 4 — Building the Features Section
Add the following immediately after the hero section:
<!-- 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>
The features themselves are displayed in a grid of two columns: the feature text and the accompanying image. Then on mobile devices we want them to stack on top of one another. We use flexbox to build our grid.
Step 5 — Building the Testimonials Section
This will contain cards of some of our users testimonies. The card will contain the user’s testimony and the user’s name. Add the following immediately after the features section:
<!-- 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>
First, we give the section a background and, just like our other sections, center it on the page. For the actual testimonies, we want them to appear in a grid. Again, we use flexbox. We want them to stack (that is, take full width of the screen) on one another when viewed on mobile devices, hence .w-full. Then, on larger screen, we want them to be displayed in three columns using .md:w-1/3. For the individual cards, we give it a background of white, 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 also the testimonials from our demo users. Add the following immediately after the testimonials section:
<!-- 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>
Step 7 — Building the Footer
The footer will contain extra links like the blog, privacy policy, social media, etc. Add the following immediately after the call to action section:
<!-- 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>
We are displaying 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.
Step 8 — Putting it together
Here is the final code:
<!-- 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>
Conclusion
We have seen how to build a landing page with Tailwind CSS. In addition to using the classes that Tailwind provides, we 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.
You can download the assets for this project at this GitHub page.
#tailwind-css #css #web-development
React Interview Questions & Answers
1625653680
How To Make a Fully Responsive Landing Page Using HTML, CSS (SCSS), and JavaScript
In this tutorial, we are going to build a fully responsive Gym Landing page using HTML, CSS (SCSS) and JavaScript. We’ll use all sort of CSS tricks and also do a little bit of usability and accessibility.
I hope that you enjoy the tutorial. It would be awesome if you like the video, comment below and consider subscribing.
Source Files: https://bit.ly/3zWOhZ4
Tips:
Tips are never expected but deeply appreciated if you are able and will go towards my channel and likely food. Please only tip if you are able, I’m just happy you’re here!
Buy Me A Beer: https://www.paypal.com/donate/?hosted_button_id=YUH7JRDUN5QEY
Chapters:
0:00 Introduction:
0:39 Project Setup
6:02 HTML5 & Reset Styles
18:10 Skip To Content Button
25:17 Header & Navbar
01:12:23 Hero
01:40:16 Categories
01:57:18 Training Options
02:09:29 Get Started Today
02:20:54 We Will Help You
02:23:01 Footer
02:23:27 Ending
CONNECT with RaddyTheBrand
Website: https://www.raddy.co.uk
GitHub: https://www.github.com/RaddyTheBrand
Instagram: https://www.instagram.com/RaddyTheBrand
Twitter: https://www.twitter.com/RaddyTheBrand
Newsletter: https://www.raddy.co.uk/newsletter
#javascript #css #html #landing page #scss #fully responsive landing page