Build a Beautiful Landing Page with Tailwind CSS v1

Publikováno: 30.5.2019

Cascading Style Sheet(CSS) is used for creating aesthetically good looking websites. CSS are styling rules that are applied to a web page to make it look beautiful. Whenever a web page is being dis...

Celý článek

Cascading Style Sheet(CSS) is used for creating aesthetically good looking websites. CSS are styling rules that are applied to a web page to make it look beautiful. Whenever a web page is being displayed, the browser renders the webpage alongside with the defined CSS rules.

Note: Tailwind CSS v1 recently came out! See the changes.

When building large websites or apps, it might become tedious to write these rules from scratch, hence the availability of multiple CSS frameworks that makes this easy. They come with existing predefined CSS rules and all you need to do is simply apply them to your web page. Examples of some popular CSS frameworks include Bootstrap, Foundation, Bulma, Pure, Materialize etc.

Say hello to Tailwind CSS

Tailwind CSS is a relatively new CSS framework that is completely changing the game. Tailwind is different from the above listed CSS frameworks 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.

What we'll be building

In this tutorial, we’ll be building a simple but yet beautiful landing page to showcase a health monitoring smart wristwatch (HMSW) product to our customers.

Our 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 here.

Getting started

We'll start by create 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 snippet below 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" />
    </head>
    <body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif">

    </body>
    </html>

We give the body a background of white. Also, we pull the source sans pro font from Google fonts.

Many of the features that make Tailwind CSS great are not available using the CDN builds. To take full advantage of Tailwind CSS features, install Tailwind via npm.

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. Paste 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 it 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 extreme, and they should 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. So 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.

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 link, 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 links, we we use a darker shade of gray once the links are hovered over.

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 the 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>

This is pretty straightforward, 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, make it a pill by giving it a fully rounded borders. Lastly, set give it some shadow and we make the text uppercase.

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 one another. We use flexbox to build our grid.

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. So 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, we make it to be centered 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.

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>

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 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.

Putting it together

<!-- 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>

https://codepen.io/ammezie/pen/JqYmYV

Conclusion

So we have seen how to build a simple but yet beautiful landing page with Tailwind CSS. In addition to just using the classes that Tailwind provides, we also used gradient colors to also make the landing page more aesthetic. To catch up more on Tailwind CSS, you can read the documentation on their official website.

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace