DEV Community: Paul Ayuk

Creating a Vacation themed website using Tailwind CSS

Paul Ayuk — Tue, 08 Jun 2021 15:34:21 +0000

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

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

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"
},
...

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

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>

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;

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;
}

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

npm start

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>

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>

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>

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%;
    }

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>

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>

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>

Then add the following to the index.css file:

.floating-sub-hero {
      bottom: -7%;
      left: 10%;
    }

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

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>

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>

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>

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;
    }

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>

Navigate to http://localhost:1234 to see the latest changes:

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>

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>

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>

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>

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%);
    }

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

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>

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>

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;
    }

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>

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"
    />

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>

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>

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>

To add the background color to the footer, add the following style to the index.css file:

    #footer {
      background-color: #13283a;
    }

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.

How to deploy a laravel application using nginx on ubuntu

Paul Ayuk — Mon, 20 Jan 2020 23:13:41 +0000

Deploying PHP applications is often a headache for PHP developers. These days, you no longer throw all your PHP files into a folder on a shared host and have it manage everything for you, Instead, you have to create and configure a server, perform multiple installations, and write the appropriate configuration etc.

In this tutorial, I will walk you through deploying a laravel application using nginx on an ubuntu server.

N/B: This tutorial assumes you have a linux server with root access already setup.

Getting Started

When deploying laravel, we often use a web-service solution stack like LAMP (Linux, Apache, Mysql, PHP) or LEMP (Linux, Nginx, Mysql, PHP). This tutorial is focused on the LEMP stack.

Linux: Open-source open operating system that has become the most accepted by developers over the years. It will be the OS powering our web application.

Nginx: Open source HTTP proxy application with reputably much smaller footprints compared to Apache, allowing it to handle higher load of HTTP requests. It’d help us handle our routing (requests / response).

PHP & Mysql: The programming language and default storage program behind laravel.

Installing Nginx

First, from your terminal log into your server and perform an update:

// log into the server
ssh root@your_server_ip

// perform update
apt-get update

Next, install nginx with the following commands:

// install nginx
apt-get install nginx

Once nginx is installed, we need to configure our firewall to allow access to the service.

The default firewall configuration tool for Ubuntu is ufw (Uncomplicated firewall). Developed to ease iptables firewall configuration, ufw provides a user-friendly way to create an IPv4 or IPv6 host-based firewall. By default UFW is disabled.

To see a list of all the application configurations that ufw knows how to work with, type:

ufw app list

You should see a list similar to this:

Enable Nginx HTTP by running the following in your terminal:

ufw allow 'Nginx HTTP'

You should see the rules for HTTP now allowed from the output.

Ubuntu 18.04 automatically starts Nginx once it is installed. To see your installation in action visit the public IP of your server from a browser and you should see the following screen:

Installing PHP

From your terminal, run the following command to install Php and all the necessary packages needed to work with laravel:

apt-get install php curl unzip php-pear php-fpm php-dev php-zip php-curl php-xmlrpc php-gd php-mysql php-mbstring php-xml

Once successful, verify that PHP is installed by typing the following:

php -v

You should see the following:

Restart nginx to allow Php run by typing the following:

systemctl restart nginx

Installing Mysql

To be able to store data, we need a storage engine. Laravel supports mysql out of the box but you can also use other storage engines. To install Mysql, run the following from your terminal:

apt-get install mysql-server

During the process, you may be prompted with a screen to input your password, just follow the prompt. Once that is done, configure mysql by running the following on your terminal:

mysql_secure_installation

Follow the prompts to set your root user password and other presets and you are good to go.

Next, log in to MySQL and create a new database with the following commands:

mysql -u username -p

create database YOUR_DATABASE_NAME

Installing Laravel

At this point, everything is in place to get our app running. We need to get our laravel application on the server before we can use it.

To install laravel and all its associated packages, we need to install composer.

Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you.

Run the following commands to install composer:

// download the installer
sudo curl -s https://getcomposer.org/installer | php

// move the composer.phar
sudo mv composer.phar /usr/local/bin/composer

From the command line, type composer to verify the installation. You should see the following screen.

Next, let’s install laravel via composer. From your server root path, navigate to var/www/html path and run the following command:

composer create-project --prefer-dist laravel/laravel blog

Once successful, you should see a newly created blog directory. Navigate to it and set the appropriate permission for the storage folder and your application key by typing the following:

chmod -R 777 storage/

php artisan key:generate

Now update your database details in your .env file to the database you created earlier:

DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password

Finally, before we try out our application, we need to configure nginx to serve our directory by default.

Open up the config file from your terminal with this command nano /etc/nginx/sites-available/default and update the code to the following:

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /var/www/html/blog/public;
    index index.php index.html index.htm index.nginx-debian.html;

    server_name localhost;

    location / {
    try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
      try_files $uri /index.php =404;
      fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
      fastcgi_index index.php;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

Save the file and restart nginx with the following command:

service nginx configtest
service nginx restart

Now, visit your public IP in the browser and you will see the following:

To test that our database is working run a database migration with the following code:

php artisan migrate

You should see the following response that verifies everything works correctly:

Conclusion

In this tutorial, we walked through the process of deploying a laravel application. We talked about lamp/lemp and the different packages required to successfully run a laravel application. Note that this is just the basics of deploying an application they are so many other aspects we didn’t cover like security, scalability, access control etc. To learn more about laravel deployments click here.

Building a Gatsby Blog with 8base

Paul Ayuk — Fri, 02 Aug 2019 17:24:06 +0000

A static website contains Web pages with fixed content. Each page is simply an HTML file with fixed content that is displayed to the visitor every-time they visit your website.

Because static websites are not dynamic, they do not require any back-end programming or database. This reduced complexity makes it easier to deploy your website as no extra configuration is required once deployed to a hosting provider. With static websites, you can enjoy the power of the latest web technologies like React.js, Vue.js, Webpack, modern JavaScript, CSS and more.

One of the main advantage is that they ensure smooth user experiences, blazing fast website speed, improved security, hassle-free deployment, in-expensive, less time-consuming and maintenance costs. Technically, since there is no database it can not be hacked and there is no need to render a page for each request, which makes Web browsing faster.

Over time, numerous open-source static websites generators have become available: Gatsby, Jekyll, Hugo, etc... Most of the time, the content is managed through static (ideally Markdown) files or a content API. These technologies have aided in the building of both static websites and blogs and have started gaining as much traction as their older blogging platforms like WordPress, Blogger, Drupal and Joomla.

In this tutorial, we will build a blog using Gatsby for the frontend and 8base for the backend.

N/B: To follow this tutorial, a basic understanding of React and Node.js is required. Please ensure that you have Node and npm/yarn installed before you begin.

What is Gatsby?

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and applications.

With Gatsby, you can get the best of both worlds by using data from one or many sources. You can get data directly into your pages using GraphQL with headless CMSs, SaaS services, APIs, databases, your file system, and more.

Every static website needs a source of content. When building websites with Gatsby, you access your data through GraphQL. GraphQL allows you to declaratively express your data needs. In this tutorial, we will access our content by setting up content API using 8base.

What is 8base?

8base is a GraphQL backend that lets javascript developers quickly deliver enterprise applications using full-stack JavaScript. It is a front-end framework agnostic, therefore it enables developers to create customer-facing applications however they choose to.

We will use 8base as a backend database layer for our app. This is where we will store and read posts for our blog.

We’ll also be making use of some GraphQL queries in the project, so some familiarity with GraphQL will be helpful.

Getting Started

8base offers a wide array of features to help developers build performant applications at a faster and much easier rate. Using the 8base Console, you can build your backend using a simple GUI that allows you to do things like:

Define data schemas: create tables/table relationships
Set permission and authorization roles
Organize multiple projects into Workspaces
Design queries using the API explorer (based on GraphQL)
Manage files

To get started using 8base, follow the steps listed below:

Create an account on 8base. You can start using 8base for free.

After sign up is complete, click on the Data Builder button to navigate to the Data menu and click on “New Table” to start building your backend.

After your new table is loaded, you’ll be taken to the schema to begin defining fields. Let’s take a look around and note a couple of things. On the left, you’ll see there are System Tables and Your Tables. Every new 8base workspace automatically comes prepackaged with a number of built-in tables. These tables are used to handle things like Files, Settings, and Permissions and can all be accessed through the 8base GraphQL API.
Go ahead and create a table Posts that consists of the following fields:

title:
type: Field type is Text.
description: This will store the title of our blog post.

body:
type: Field type is Text.
description: This field will hold the body of our blog post.

We need some sample posts to work with, so let’s add some sample data. Next to the schema menu icon were we created our schema, click on the Data tab and add a sample Post record by setting a title and body.

Next, copy the API endpoint URL (available on the bottom left) — this is single endpoint for communication between your frontend and your 8base backend.

Finally, for the purpose of this tutorial we’re going to allow open access to Guests by default so that dealing with authentication is optional. To allow guest access to your new Posts table, navigate to Settings > Roles > Guest and check the appropriate boxes under Posts and Files.

All unauthenticated users who access your API endpoint are assigned the role of Guest by default. We won’t cover authentication in this tutorial. You can see how authentication should be handled in more detail here.

In just a few simple steps, we’ve finished setting up a production ready CMS backend using 8base. Let’s start work on the frontend side of the application.

Using Gatsby

To start using Gatsby, we must first install it using the Gatsby CLI. Create a new working directory and run the following in your terminal:

npm install --global gatsby-cli

Generate a Gatsby project

In the folder you previously created, generate your brand new Gatsby blog:

gatsby new blog

This command will generate a new blog using the gatsby default blog starter theme.

Start in development mode

Enter your project's folder and start the server by running the following command in your browser terminal:

gatsby develop

Your Gatsby website would be available at this address: http://localhost:8000

Connecting Our 8base backend

To connect Gatsby to a new source of data, you can either use an existing source plugin or develop a new source plugin. At the time of writing 8base doesn’t have a source plugin so we will write our configuration manually.

To connect our 8base backend we will make use of some Apollo GraphQL packages. To install them, run the following command in your terminal:

npm install --save apollo-boost react-apollo apollo-link-http apollo-cache-inmemory graphql-tag

Next, we will create an 8base.config.js file in the root of our project to hold all our configurations. Create the file and add the following code to it:

     // 8base.config.js
    import { ApolloClient } from 'apollo-boost'
    import { ApolloProvider } from "react-apollo";
    import { createHttpLink } from 'apollo-link-http'
    import { InMemoryCache } from 'apollo-cache-inmemory'

    const ENDPOINT = 'YOUR-8BASE-ENDPOINT';

    const httpLink = createHttpLink({uri: ENDPOINT,});

    const client = new ApolloClient({
      link: httpLink,
      cache: new InMemoryCache()
    })

    export { client }

Next, we need to wrap our entire application layout with Apollo provider. Once that is done , we will be able to connect to and query 8Base from our components.

Open layout.js in the src directory ****and update it with the following code:

    // src/layout.js

    import React from "react"
    import PropTypes from "prop-types"
    import { ApolloProvider } from 'react-apollo'
    import { client } from "../../eightBase-config.js";
    import "./layout.css"

    const Layout = ({ children }) => (
      <ApolloProvider client={client}>
        <main>
          {children}
        </main>
      </ApolloProvider>
    )

    Layout.propTypes = {
      children: PropTypes.node.isRequired,
    }

    export default Layout

Now, we need to write queries that would fetch all our posts from 8base. First, create a folder called queries inside the src folder, then create an index file and add the following to it*:*

    // src/queries/index.js

    import gql from 'graphql-tag';

    const POSTS_QUERY = gql`
      query {
        postsList{
              items{
                id,
                title,
                body,
                createdAt
              }
           }
      }
    `;

    export { POSTS_QUERY }

Here, we’ve written a query to get all our posts from 8base.

To display all our posts we need to run the query. For that, let’s create a posts.js file **component in the **src/components folder with the following code:

    // src/components/posts.js
    import React, { Component } from 'react'
    import { Query } from 'react-apollo'
    import { POSTS_QUERY } from "../queries/index";
    import { Link } from "gatsby";
    import './posts.css';

    export default class Posts extends Component {

      render() {
        return (
          <Query query={POSTS_QUERY}>
            {({ loading, error, data }) => {
              if (loading) return <h1>Fetching</h1>
              if (error)   return <h1>Error</h1>
              const posts = data.postsList.items
              return (
                    <div>
                      <div className="header">8thBlog</div>
                      {posts.map((post, index) => {
                          return (
                            <div key={index} className="main">
                                  <div className="card-body">
                                    <h2>
                                      <Link to="#" className="links">{post.title}</Link>
                                      <span className="created">Created At: {post.createdAt}</span>
                                    </h2>
                                    <p className="card-text">{post.body}</p>
                                  </div>
                            </div>
                          )
                      })}
                    </div>
                  )
              }}
            </Query>
        )}
    }

This code runs the query and returns it in the component. To see it on our page, we need to update our src/pages/index file which is the main page that is displayed when Gatsby is launched. Open up the page and add the following to it:

    // src/pages/index.js

    import React from "react"
    import Layout from "../components/layout"
    import Posts from '../components/Posts';

    const IndexPage = () => (
      <Layout>
        <Posts />
      </Layout>
    )

    export default IndexPage

Next, create a posts.css file in the src/components and add the following code to it:

    // src/components/posts.css
    .header {
        width: 100%;
        height: 70px;
        background-color: #036ffc;
        padding: 10px;
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .main {
        margin: 0 auto;
        width: 600px;
        padding: 15px;
    }

    .created {
      font-size: 12px;
      margin: 5px 0px 0px 5px;
      font-style: italic;
      display: block;
    }

    .links {
      text-decoration: none;
    }

To see the changes, restart your server run gatsby develop in your terminal, then visit http://localhost:8000 in a browser and you should see the following screen:

Conclusion

Throughout the creation of our blog we’ve explored how to use 8base to get a functioning backend in minutes, we’ve also seen how to setup Gatsby and write queries to fetch data from the 8base GraphQL API. 8base as a platform is relatively easy to navigate and offers an intuitive user interface. You can also visit their official documentation to learn more about the how it works.

Also, the source code of this tutorial’s blog application can be found here.

DEV Community: Paul Ayuk

Creating a Vacation themed website using Tailwind CSS

Project Setup

Building the header

Building the Hero Section

The planner section

The Categories

The stories section

Testimonials Section

The footer

Conclusion

How to deploy a laravel application using nginx on ubuntu

Getting Started

Installing Nginx

Installing PHP

Installing Mysql

Installing Laravel

Conclusion

Building a Gatsby Blog with 8base

What is Gatsby?

What is 8base?

Getting Started

Using Gatsby

Generate a Gatsby project

Start in development mode

Connecting Our 8base backend

Conclusion