DEV Community

Paul Ayuk
Paul Ayuk

Posted on • Edited on

Creating a Vacation themed website using Tailwind CSS

#tailwindcss #css #frontend

TailwindCSS is a utility first framework for building custom web page designs. It provides easy to grasp CSS classes for creating web pages.

It can be used alongside any front-end framework or library. Its main objective is to help you rapidly create custom designs. You can find more details on their official website.

In this article, we’d recreate a design on dribbble called Vacarion using Tailwind CSS. You can find the design below:

You can find a working demo of the application here.

N/B: We will make use of Parcel as a dev server and build runner, If you haven’t used parcel before now, you can read about it here.

Project Setup

To get started, we'd create a new project:

mkdir vacarion && cd vacarion && npm init
Enter fullscreen mode Exit fullscreen mode

The command above creates a folder named vacarion with a package.json file inside it.

The npm init command will present you with several prompts. You can easily accept all the default value provided for each prompt.

Next, install TailwindCSS and Parcel:

npm install parcel-bundler tailwindcss --save-dev
Enter fullscreen mode Exit fullscreen mode

Add Parcel and tailwind's config to finish the setup:

Update the scripts section of your package.json file with the following commands:

// package.json
...
"scripts": {
  "start": "npm run run:css && parcel index.html",
  "run:css": "npx tailwind build tailwind.css -o vendor.css"
},
...
Enter fullscreen mode Exit fullscreen mode

The run:css command generates and outputs tailwind’s css code to the vendor.css file using the directives in the tailwind.css file.

The start command runs the run:css command to build the stylesheet before it starts the development server that watches the index.html file.

Run the following command to create all the project files:

touch index.html {index,tailwind}.css
Enter fullscreen mode Exit fullscreen mode

Paste the starter snippet below into the index.html file:

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700,900&display=swap"
      rel="stylesheet"
    />
    <link href="./vendor.css" rel="stylesheet" />
    <link href="./index.css" rel="stylesheet" />
    <script src="https://unpkg.com/feather-icons"></script>
    <title>Vacation Site</title>
  </head>
  <body>
    <h1>Getting Started</h1>
    <script>
      feather.replace();
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

We’ll use the Raleway font-family and an icon set called Feathericons. We’ve also included our stylesheets and initialised Feathericons using the feather.replace() method right before the end of our body tag.

Open the tailwind.css file and include the following build directives for Tailwind:

/* tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

The directives above will inject tailwind's base, components, and utilities styles into your CSS. The directives will be swapped at build time into vendor.css with all of its generated CSS.

To initialise the font in the project, add the code in the snippet to your index.css file:

/* index.css */

* {
  font-family: 'Raleway', sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Now that we have all our files ready, let’s start up the server using the start command:

npm start
Enter fullscreen mode Exit fullscreen mode

Navigate to http://localhost:1234 in your browser and you should see the following view:

Once you see this view, you’re ready to get started.

Building the header

Let’s start by recreating the header section:

All the items are lined horizontally and there’s a huge space separating the brand name and the navigation items.

Update the body of your index.html file with the following snippet:

<header class="w-4/5 mx-auto py-6 flex justify-between items-center">
  <!-- Brand name -->
  <div>
    <h1 class="text-2xl text-gray-800 font-bold">Vacarion</h1>
  </div>

  <!--menu-->
  <div>
    ...
  </div>
</header>
Enter fullscreen mode Exit fullscreen mode

We used 3 pure CSS classes and 6 tailwind classes to create the header menu.

  • w-4/5: the header doesn’t span the width of the page in the design. W-4/5 is used to set an element to a percentage based width. It fills 80% of the screen. You can find more width targeted classes here.
  • mx-auto: since the header only covers 80% of the screen, we use this class to center it by giving setting auto margins on both sides.
  • py-6: gives the header a vertical padding of 1.5 rem.
  • flex: sets display to flex so the menu items appear horizontally.
  • justify-between: put spaces between the menu items.
  • items-center: centers the menu items vertically.
  • text-2xl : Sets the text a size to 1.5rem.
  • text-gray-800 : sets the text color to a dark shade of gray.
  • font-bold : sets the font weight to 700.

The brand name and container element have been styled, let’s do the navigation items next. Add the following;

<header class="w-4/5 mx-auto py-6 flex justify-between items-center">
  <!-- menu -->
  <div>
    <ul class="flex">
      <li class="mx-4">
        <span class="font-bold text-gray-700">Home</span>
      </li>
      <li class="mx-4">
        <span class="font-medium text-gray-500">Trip Planner</span>
      </li>
      <li class="mx-4">
        <span class="font-medium text-gray-500">Blogs</span>
      </li>
      <li class="mx-4">
        <span class="font-medium text-gray-500">Categories</span>
      </li>
      <li class="mx-4">
        <span class="font-medium text-gray-500">Stories</span>
      </li>
      <li class="mx-4">
        <span class="font-medium text-gray-500">Contact</span>
      </li>
      <li class="mx-4">
        <span class="font-light text-gray-500">
          <i data-feather="search" class="text-gray-400"></i>
        </span>
      </li>
    </ul>
  </div>
</header>
Enter fullscreen mode Exit fullscreen mode
  • flex utility class is used to display the navigation items horizontally.
  • mx-4 gives all the list items a margin of 4px on both sides.

On your browser, your new site should look like the screenshot below:

Building the Hero Section

The hero section features two sections, the first is the area with image and the heading text while the second is a floating area with a call to action button.

First we’ll do the background image and the heading area before we do the slideshow indicators:

<!-- index.html -->
    ...
    <body>
      <header>
        ...
      </header>
      <div class="w-11/12 flex ml-auto relative">
          <section class="py-16 px-16 hero w-full flex justify-between">
            <div>
              <!-- heading area -->
            </div>
            <div>
              <!-- Indicators area -->
            </div>
          </section>
          <! -- floating call to action -->
        </div>
    </body>
Enter fullscreen mode Exit fullscreen mode

  • We gave the hero section a width of 91% using the w-11/12 class and pushed it to the right by giving it an auto margin on the left with ml-auto. We’ve also set its position to relative as it will be the reference of our floating call to action div.

  • To set the background image, add some custom styles to the index.css file.

    .hero {
      background: url('./assets/imgs/beach-bg.jpg') no-repeat;
      height: 500px;
      width: 100%;
    }
Enter fullscreen mode Exit fullscreen mode

You can find all image assets used in this GitHub repository

  • Add the following snippet where you have the heading area comment: 
    <!-- heading area -->
    <h1 class="text-white text-5xl font-hairline leading-tight">
      <span class="font-semibold"> Discover</span> a touch <br />
      of nature's <br />
      clarity
    </h1>
    <div class="mt-10">
      <div class="h-10 w-10 border border-blue-300 flex justify-center items-center">
        <i data-feather="play" class="text-white fill-current h-4"></i>
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • Let’s walkthrough some of the new classes we’re using here:
    • leading-tight: is used to reduce the line height. You can check the docs for more classes prefixed with leading- here.
    • fill-current: is used to fill the SVG background with the text color.
    • h-10 & w-10 - sets the height and width of the box to 2.5 rem.
    • border & border-blue-300: sets a border around the element and gives it the color blue.

NB: calling feather.replace() swaps the i element with SVGs. The classes assigned to the i element are transferred.

Next up, is the slide indicators area. The container element (the section tag) has a class of justify-between so the container element for the indicators will be pushed to the far right.

Add the following code snippet where you have the indicators area comment:

<!-- Indicators area -->

    <h2 class="text-3xl tracking-wide font-extrabold text-white">01</h2>
    <div class="flex flex-col mt-8 items-center">
      <div class="h-2 w-2 border border-white rounded-full mb-4"></div>
     <div class="h-2 w-2 border border-white bg-white rounded-full mb-4"></div>
      <div class="h-2 w-2 border border-white rounded-full mb-4"></div>
      <div class="h-2 w-2 border border-white rounded-full mb-4"></div>
    </div>
    <div class="flex flex-col items-center text-white mt-8">
      <i data-feather="chevron-up" class="mb-3 h-4 w-4"></i>
      <i data-feather="chevron-down" class=" h-4 w-4"></i>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • Let’s walkthrough some of the new classes used:
    • flex-col : used to to position flex items vertically.
    • rounded-full : Used to create pills and circles.
    • tracking-wide: Adds a letter-spacing of 0.025em to the element.

Now, let’s deal with the floating area. We’ll need to add some custom styles to deal with the absolute positioning. First, let’s define the structure. Add the following in the space defined for the floating call to action:

    <! -- floating call to action -->

    <div class="absolute flex py-6 px-8 justify-between items-center w-3/4 shadow-xl bg-white floating-sub-hero">
    <div>
      <p class="uppercase mb-0 text-gray-400 text-xxs font-bold tracking-wider">
        Asian
      </p>
      <h2 class="text-2xl mb-0 tracking-wide font-normal">
        <b>Indonesia</b>
      </h2>
    </div>
    <div class="flex">
      <div class="flex flex-col items-end">
        <p class="text-gray-400 uppercase font-bold text-xs tracking-wider m-0">
          Summer tour
        </p>
        <p class="text-left uppercase text-xs mb-0 mt-2 font-black">
          Nov 2018
        </p>
      </div>
      <div class="ml-5">
        <div class="h-12 w-12 bg-blue-600 flex items-center justify-center shadow">
          <p class="text-white m-0 text-3xl font-hairline">+</p>
        </div>
      </div>
    </div>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • Then add the following to the index.css file: 
.floating-sub-hero {
      bottom: -7%;
      left: 10%;
    }
Enter fullscreen mode Exit fullscreen mode

  • We give the hero a bottom value of -7% to cause the overlay effect and a left value of 10% to move it away from the edge.

  • In your browser, You should see a view similar to this when you navigate to http://localhost:1234
    Photo by Pedro Monteiro on Unsplash

The planner section

  • The planner section is divided into two sections with the first containing a little writeup about the planner and the second section contains the different plans in a card format. Here’s the area in question:

  • Here’s how the HTML skeleton of the area would look like:

    <div class="w-4/5 mx-auto mt-32">
      <section class="flex">
        <div class="w-2/5">
          <!-- explore plans section -->
        </div>
        <div class="ml-auto w-2/4 flex">
          <!-- cards section -->
        </div>
      </section>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • For the explore section, replace the comment with the following snippet: 
 <!-- explore area -->
    <div>
      <h2 class="text-3xl font-light">
        Trip Planner
      </h2>
      <div class="h-1 bg-gray-300 w-10 mt-2"></div>
    </div>
    <p class="text-sm text-gray-500 font-normal my-4 leading-loose">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias
      mollitia enim aliquid debitis, dolor deserunt nihil in culpa vitae
      quibusdam qui earum cum! Similique eveniet at magnam laboriosam
      consequatur illo.
    </p>
    <button
      class="bg-blue-600 py-3 px-5 text-xs font-semibold text-white flex justify-center items-center mt-4 shadow-lg"
    >
      Explore <i data-feather="arrow-right" class="ml-1 h-4"></i>
    </button>
Enter fullscreen mode Exit fullscreen mode

Add the following in the trip plans card section. For the sake of brevity, the code for the card item will be posted once, copy and paste it twice and update the contents of the second card to match the design:

    <!-- card -->
    <div class="w-2/5 mr-auto tour-card">
      <div>
        <div class="relative image-section">
          <img
            src="./assets/imgs/beach-chills.jpg"
            alt="Umbrellas at the beach"
          />
          <div
            class="absolute bg-white p-2 shadow-lg right-0 bottom-0 flex items-center justify-center w-16"
          >
            <span class="text-xxs absolute font-bold dollar-sign">$</span>
            <p class="m-0 text-base font-semibold">479</p>
          </div>
        </div>
        <p class="text-sm font-medium mt-2">
          Tour Pantai Selatan Yogyakarta Inter Matter
        </p>
        <div class="flex mt-2">
          <p class="uppercase text-gray-500 font-semibold text-xxs">
            15 days tour
          </p>
          <div class="flex ml-10">
            <i
              data-feather="star"
              class="h-3 fill-blue mr-1 text-blue-600 w-3"
            ></i>
            <i
              data-feather="star"
              class="h-3 fill-blue mr-1 text-blue-600 w-3"
            ></i>
            <i
              data-feather="star"
              class="h-3 fill-blue mr-1 text-blue-600 w-3"
            ></i>
            <i
              data-feather="star"
              class="h-3 fill-blue mr-1 text-blue-600 w-3"
            ></i>
            <i data-feather="star" class="h-3 text-gray-400 w-3"></i>
          </div>
        </div>
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

The image assets used for this can be found in this repository. After duplicating the card, use this image

  • For this section, we used a few custom styles. Copy the following styles into the index.css file: 
    // index.css

    .text-xxs {
      font-size: 9px;
    }
    .dollar-sign {
      top: 11px;
      left: 11px;
    }
    .fill-blue {
      fill: #3182ce;
    }

    img {
      max-width: 100%;
      max-height: 100%;
    }

    .tour-card .image-section {
      width: 200px;
      height: 250px;
    }
Enter fullscreen mode Exit fullscreen mode
  • You should see a view on your browser similar to the one shown below:

  • Below the trip planner is a small section talking about the company blog. The section we are working can be seen below:

  • Add the following snippet below the trip planner section:

    <div class="w-11/12 mr-auto mt-32">
      <section class="flex items-center">
        <div class="w-1/2">
          <img src="./assets/imgs/beach-trees.jpg" alt="Trees at the beach" />
        </div>
        <div class="w-2/5 ml-auto">
          <div>
            <h2 class="text-3xl font-light">
              Blogs
            </h2>
            <div class="h-1 bg-gray-300 w-10 mt-2"></div>
          </div>
          <p class="text-sm text-gray-500 font-normal my-4 leading-loose">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias
            mollitia enim aliquid debitis, dolor deserunt nihil in culpa vitae
            quibusdam qui earum cum! Similique eveniet at magnam laboriosam
            consequatur illo.
          </p>
          <button
            class="bg-blue-600 py-3 px-5 text-xs font-semibold text-white flex justify-center items-center mt-4 shadow-2xl"
          >
            Read More <i data-feather="arrow-right" class="ml-1 h-4"></i>
          </button>
        </div>
      </section>
    </div>
Enter fullscreen mode Exit fullscreen mode

The Categories

  • The area showcasing the different categories is in form of a slider. We'd focus on the display than the functionality:

We’d split the implementation of this section into three parts for the sake of brevity. The skeleton for this section should look like this:

    <div class="mt-32">
      <section class="w-4/5 mx-auto flex justify-between items-center">
        <!-- header and arrow buttons -->
      </section>
      <section class="flex justify-between slideshow px-6 mt-4">
        <!-- category cards -->
      </section>
      <section class="mt-16">
        <!-- Slider indicators -->
      </section>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • The header is split into three sections: the header text, the write up and the arrow buttons. We’D use the flex class and justify-between to space the contents: 
    <!-- header and arrow buttons -->
    <div class="w-1/5 mr-auto">
      <h2 class="text-3xl font-light">
        Categories
      </h2>
      <div class="h-1 bg-gray-300 w-10 mt-2"></div>
    </div>
    <div class="w-1/2">
      <p class="text-sm text-gray-500 font-normal my-4 leading-loose">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias
        mollitia enim aliquid debitis, dolor deserunt Nihil in culpa vitae
        quibusdam qui earum cum! Similique eveniet at magnam laboriosam
        consequatur illo.
      </p>
    </div>
    <div class="flex justify-center w-1/5 ml-auto">
      <div>
        <button
          class="bg-white text-gray-500 border border-gray-400 py-4 px-4 text-xs font-semibold flex justify-center items-center mr-3"
        >
          <i data-feather="arrow-left" class="h-4"></i>
        </button>
      </div>
      <div>
        <button
          class="bg-blue-600 py-4 px-4 text-xs border border-blue-600 font-semibold text-white flex justify-center items-center shadow-xl"
        >
          <i data-feather="arrow-right" class="h-4"></i>
        </button>
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

Next is the slider, the snippet below is for just one of the slides, you can copy and paste it three more times and update the content to get the all the slides present:

    <!-- category card -->
    <div class="card relative">
      <img src="./assets/imgs/beach-seats.jpg" alt="" />
      <div class="absolute overlay-text w-full flex flex-col items-center">
        <p class="text-white text-xl tracking-tight">Waterfall</p>
        <p class="text-xs text-gray-500 font-semibold uppercase mt-1">
          43 Adventures
        </p>
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

  • To get the slider working, you can use the dependency free library GlideJs or you can make use of Slick that depends on Jquery.

  • And then for the indicators, we’ll have a simple setup as seen below:

    <!-- slide indicators -->
    <div class="flex mx-auto justify-center">
      <div class="h-1 w-10 bg-gray-400 mr-4"></div>
      <div class="h-1 w-10 bg-gray-400 mr-4"></div>
      <div class="h-1 w-10 bg-blue-600 mr-4"></div>
      <div class="h-1 w-10 bg-gray-400 mr-4"></div>
      <div class="h-1 w-10 bg-gray-400"></div>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • And then add the following custom styles to the index.css file: 
    /* index.css */
    .slideshow .card {
      width: 24%;
      height: 300px;
    }
    .slideshow .card .overlay-text{
      bottom: 20px;
    }
    .slideshow .card img{
      object-fit: cover;
      width: 100%;
      filter: brightness(50%);
    }
Enter fullscreen mode Exit fullscreen mode

  • You should see a view similar to the one below in your browser:

  • You can find the assets used here. Visit http://localhost:1234 to view the changes.

The stories section

  • This section features an interesting background that I couldn’t find and my rusty Sketch skills weren’t enough to fully replicate it so I took a screenshot of the design and patched it to get the background. I’ll add a link to the patched background, you can always have a go at recreating the design or using a separate image.

  • Before we get started, this is the section in question:
    That social connection

  • We’d handle this section in two parts, the heading and sub-heading and then the user profile card. We won’t be attempting the background using Tailwind as it’ll most likely be a background image. Here is how the skeleton of this section will look:

    <div class="mt-40">
      <!-- heading and sub-heading -->
      <div class="travel-stories flex justify-between">
        <!-- user card -->
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

For the heading, we’d deploy the following setup:

    <div class="flex flex-col items-center">
      <h2 class="text-4xl font-hairline text-gray-800 text-center">
        Share your stories
      </h2>
      <div class="h-1 bg-gray-400 w-12 mt-2"></div>
    </div>
    <div class="mt-10 mx-auto">
      <p class="text-sm font-hairline text-center text-gray-600">
        Join a community of awesome people, share your stories <br />
        and share them with people all over the world
      </p>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • And then for the stories we’ll attempt a hack to achieve the positioning of the story card. My first thought was to opt for an absolute positioning of the card but I tried the method shown in the code snippet below instead: 
    <!-- story card -->
    <div class="w-1/5"></div>
    <div class="w-1/5"></div>
    <div class="w-1/5"></div>
    <div class="w-1/5">
      <div class="w-full shadow-2xl mt-12">
        <div class="flex justify-center">
          <img
            src="https://randomuser.me/api/portraits/women/44.jpg"
            alt=""
            class="rounded-full border h-24 w-24"
          />
        </div>
        <div class="px-5 py-4 bg-white">
          <h3 class="text-center tracking-wide">Cynthia Mayoris</h3>
          <p
            class="text-center text-xs text-gray-500 uppercase tracking-wider font-semibold"
          >
            New York, USA
          </p>
          <div class="flex justify-center mt-4">
            <div class="flex mr-4">
              <span data-feather="user" class="fill-current h-4 w-4 mr-1"></span>
              <p class="text-xxs font-bold">
                12k
              </p>
            </div>
            <div class="flex">
              <span data-feather="heart" class="fill-current h-4 w-4 mr-1"></span>
              <p class="text-xxs font-bold">
                3k
              </p>
            </div>
          </div>
        </div>
        <div>
          <button
            class="w-full bg-blue-600 py-6 px-5 text-xs border border-blue-600 font-semibold text-white flex justify-center items-center shadow-xl"
          >
            View Stories <i data-feather="arrow-right" class="h-4 ml-3"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="w-1/5"></div>
Enter fullscreen mode Exit fullscreen mode
  • I created a grid containing five items and placed the card in the fourth column, giving us the positioning we desired. We added custom styles to set the background, copy and add them to the index.css file: 
    .travel-stories{
      background: url('/stories-bg.jpg') no-repeat;
      background-size: cover;
      height: 550px;
    }
Enter fullscreen mode Exit fullscreen mode

You can find the background image used here. You’ll find it all patched up.

  • We can head to the browser again for updates. You should find the stories section showing up looking like the screenshot below:

  • Testimonials Section

  • The testimonials section will also feature a slider so my recommendations for Javascript sliders will come in handy here also. We’ll take on this section in bits as we’ve done before, it is divided into three columns. The columns can be seen below:

  • The writeup and the rating on the left, the user photo in the middle and the header and buttons on the right. The slider indicators are below. First, we’ll define the skeleton of the section:

    <div class="mt-32">
      <section class="w-4/5 flex mx-auto">
        <div class="w-1/3 px-3">
         <!-- Review text and rating -->
        </div>
        <div class="w-1/3 px-4 flex justify-center">
          <!-- User photo -->
        </div>
        <div class="w-1/3 px-4">
          <!-- Header and arrow buttons -->
        </div>
      </section>
      <section class="mt-12">
       <!-- slider indicators -->
      </section>
    </div>
- For the review section, the markup should look like this:
    <!-- Review text and rating -->
    <div class="flex justify-end mb-4">
      <i
        data-feather="star"
        class="h-3 fill-blue mr-1 text-blue-600 w-3"
      ></i>
      <i
        data-feather="star"
        class="h-3 fill-blue mr-1 text-blue-600 w-3"
      ></i>
      <i
        data-feather="star"
        class="h-3 fill-blue mr-1 text-blue-600 w-3"
      ></i>
      <i
        data-feather="star"
        class="h-3 fill-blue mr-1 text-blue-600 w-3"
      ></i>
      <i data-feather="star" class="h-3 text-gray-400 w-3"></i>
    </div>
    <p class="text-sm font-hairline text-gray-600">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam
      iure cupiditate necessitatibus aut, placeat dignissimos tempora
      accusantium beatae? Vitae placeat eum aperiam amet saepe porro
      commodi. Eos odio numquam totam?
    </p>
    <div class="mt-3">
      <p class="text-sm font-hairline text-right">Barry Underwood</p>
      <p
        class="text-xs text-gray-400 uppercase font-semibold mt-1 text-right"
      >
        Traveler
      </p>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • Next is the reviewer photo. A simple photo given a width and height: 
    <!-- User photo -->
    <img
      src="./assets/imgs/photo-male.jpg"
      alt="Someone's face"
      class="h-56 w-56"
    />
Enter fullscreen mode Exit fullscreen mode

Photo by Italo Melo from Pexels. You can find the image used here.

  • And then the header and the arrow buttons: 
    <!-- Header and arrow buttons -->
    <div>
      <h2 class="text-4xl font-hairline text-gray-700">
        What people <br />
        says
      </h2>
      <div class="h-1 bg-gray-300 w-10 mt-2"></div>
    </div>
    <div class="flex justify-start mt-12 ml-auto">
      <div>
        <button
          class="bg-white text-gray-500 border border-gray-400 py-4 px-4 text-xs font-semibold flex justify-center items-center"
        >
          <i data-feather="arrow-left" class="h-4"></i>
        </button>
      </div>
      <div>
        <button
          class="bg-blue-600 py-4 px-4 text-xs border border-blue-600 font-semibold text-white flex justify-center items-center shadow-xl"
        >
          <i data-feather="arrow-right" class="h-4"></i>
        </button>
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

Adding the slider indicators last. We can use a similar markup we used for the indicators categories section. This it how it looks for this section:

    <!-- slider indicators -->
    <div class="flex justify-center">
      <div class="h-1 w-10 bg-gray-400 mr-4"></div>
      <div class="h-1 w-10 bg-gray-400 mr-4"></div>
      <div class="h-1 w-10 bg-gray-400 mr-4"></div>
      <div class="h-1 w-10 bg-blue-600 mr-4"></div>
      <div class="h-1 w-10 bg-gray-400 mr-4"></div>
      <div class="h-1 w-10 bg-gray-400"></div>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • Our project is near completion, this is how it currently looks:

The footer

  • The application features a minimalistic footer setup, it showcases the social media links and some of the pages relating to policy and privacy. The footer looks this way:

  • The inline links and social icons can be achieved using a flex display coupled with justify-between to space the content. Let’s see how the markup of the footer will look:

    <footer id="footer" class="py-8 mt-32">
      <section class="w-4/5 mx-auto flex justify-between">
        <div>
          <p class="text-sm text-white m-0">&copy; Vacarion 2020 All Rights Reserved</p>
        </div>
        <div>
          <ul class="flex text-white items-center">
            <li class="mr-5"><a href="#" class="text-sm">Terms & Conditions</a></li>
            <li class="mr-5"><a href="#" class="text-sm">Privacy</a></li>
            <li class="mr-5"><a href="#" class="text-sm">Policy</a></li>
            <li class="mr-5"><a href="#" class="text-sm">Cookies</a></li>
          </ul>
        </div>
        <div>
          <ul class="flex items-center">
            <li class="mr-4 h-8 w-8 rounded-full flex justify-center bg-white items-center"><i class=" h-4 w-4" data-feather="instagram"></i></li>
            <li class="mr-4 h-8 w-8 rounded-full flex justify-center bg-white items-center"><i class=" h-4 w-4" data-feather="twitter"></i></li>
            <li class="mr-4 h-8 w-8 rounded-full flex justify-center bg-white items-center"><i class=" h-4 w-4" data-feather="linkedin"></i></li>
            <li class="mr-4 h-8 w-8 rounded-full flex justify-center bg-white items-center"><i class=" h-4 w-4" data-feather="facebook"></i></li>
            <li class="mr-4 h-8 w-8 rounded-full flex justify-center bg-white items-center"><i class=" h-4 w-4" data-feather="youtube"></i></li>
          </ul>
        </div>
      </section>
    </footer>
Enter fullscreen mode Exit fullscreen mode
  • To add the background color to the footer, add the following style to the index.css file: 
    #footer {
      background-color: #13283a;
    }
Enter fullscreen mode Exit fullscreen mode

  • Here is how it looks when viewed on the browser:

  • You can find the full page demo of the application here.

    Conclusion

  • In this article, we’ve seen how we can do a full page website design using utility classes from Tailwind. In total, we wrote 50 lines of custom pure CSS, which is amazing. You can take the current setup a step further by making the site responsive also using utility classes provided by Tailwind. You can find a tutorial in the Tailwind docs on responsive design here.

  • The complete code used in this tutorial can be found here. The demo can be viewed using this link.

Top comments (0)

Read next

_ndeyefatoudiop profile image

No one wants to hire you. Now what?

Ndeye Fatou Diop -

thesohailjafri profile image

Tailwind Vs Chakra UI | The Ultimate React UI Library Battle

Sohail @chakraframer.com -

vivecodes profile image

Understanding Expensive Calculations in React for Beginners

vive -

eleftheriabatsou profile image

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

Eleftheria Batsou -