In this lesson, we are going to be building the callouts section of our travel site.

The final result will look like:

You can pick up where we last left off, by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for the previous article is 5-features-section and that is also where we will begin this lesson from.

This branch also contains images and svg's that we will use in this section, so please make sure you grab those.
The illustration comes from Drawkit.io
robertguss/howtocode.io-tailwind-css-landing-page
HowToCode.io - Tailwind CSS Landing Page Tutorial. Contribute to robertguss/howtocode.io-tailwind-css-landing-page development by creating an account on GitHub.

Or you can do it via git with:

git clone git@github.com:robertguss/howtocode.io-tailwind-css-landing-page.git

git checkout 5-features-section

At this point in our tutorial, you should be getting quite familiar with how the classes in Tailwind CSS work and what they mean. So for the rest of the tutorials, I will not be creating tables which list what each class means. If you come across a class you do not recognize, please use the search in their docs to look it up.
Tailwind CSS - A utility-first CSS framework for rapidly building custom designs
Documentation for the Tailwind CSS framework.

First, let's create a new partial called callouts.html and include it in our src/partials directory and then include it in our index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home | FunTravel</title>
  <link rel="stylesheet" href="./css/main.css" />
</head>

<body>
  <include src="./partials/nav.html"></include>
  <include src="./partials/hero.html"></include>
  <include src="./partials/quote-form.html"></include>
  <include src="./partials/popular-destinations.html"></include>
  <include src="./partials/features.html"></include>
  <include src="./partials/callouts.html"></include>

  <script src="./js/main.js"></script>
</body>

</html>

Then we will add our travel tickets illustration.

<section class="plan-types relative container mx-auto mt-48 pb-24">
  <!-- Travel Tickets Illustration -->
  <div class="travel-tickets-illustration pt-32">
    <img class="travel-tickets w-1/3 absolute" src="./images/travel-tickets-colour.svg" alt="" />
  </div>
</section>

It should look like this.

Next, let's add our first callout


For the callouts I am also utilizing the cards component provided by the Tailwind docs
Cards - Tailwind CSS
Examples of building card components with Tailwind CSS.
<section class="plan-types relative container mx-auto mt-48 pb-24">
  <!-- Travel Tickets Illustration -->
  <div class="travel-tickets-illustration pt-32">
    <img class="travel-tickets w-1/3 absolute" src="./images/travel-tickets-colour.svg" alt="" />
  </div>

  <!-- Callout 1 -->
  <div class="w-full mx-auto lg:max-w-full lg:flex shadow-2xl">
    <div
      class="plan-image h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden bg-center"
      style="background-image: url(https://source.unsplash.com/600x400/?nature)"></div>
    <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
      <div class="mb-8">
        <div class="text-gray-900 font-bold text-xl mb-2">
          Callout 1
        </div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatibus quia, nulla! Maiores et perferendis eaque,
          exercitationem praesentium nihil.
        </p>
      </div>
    </div>
  </div>
</section>

Now if you look at our page, our tickets are overlapping our card.

Let's add some custom css to position these tickets in a better spot. Add the following to main.css

.travel-tickets {
  right: 0;
  top: -200px;
  transform: rotate(-15deg);
  z-index: -1;
}

Much better 😎


Now we will add another callout before we put it inside of a 2 column grid

Here is the markup before we add the grid

<section class="plan-types relative container mx-auto mt-48 pb-24">
  <!-- Travel Tickets Illustration -->
  <div class="travel-tickets-illustration pt-32">
    <img class="travel-tickets w-1/3 absolute" src="./images/travel-tickets-colour.svg" alt="" />
  </div>

  <!-- Callout 1 -->
  <div class="w-full mx-auto lg:max-w-full lg:flex shadow-2xl">
    <div
      class="plan-image h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden bg-center"
      style="background-image: url(https://source.unsplash.com/600x400/?nature)"></div>
    <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
      <div class="mb-8">
        <div class="text-gray-900 font-bold text-xl mb-2">
          Callout 1
        </div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatibus quia, nulla! Maiores et perferendis eaque,
          exercitationem praesentium nihil.
        </p>
      </div>
    </div>
  </div>

  <!-- Callout 2 -->
  <div class="w-full mx-auto lg:max-w-full lg:flex shadow-2xl">
    <div
      class="plan-image h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden bg-center"
      style="background-image: url(https://source.unsplash.com/600x400/?business)"></div>
    <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
      <div class="mb-8">
        <div class="text-gray-900 font-bold text-xl mb-2">
          Callout 2
        </div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatibus quia, nulla! Maiores et perferendis eaque,
          exercitationem praesentium nihil.
        </p>
      </div>
    </div>
  </div>
</section>

Here is the markup with the 2 column grid

<section class="plan-types relative container mx-auto mt-48 pb-24">
  <!-- Travel Tickets Illustration -->
  <div class="travel-tickets-illustration pt-32">
    <img class="travel-tickets w-1/3 absolute" src="./images/travel-tickets-colour.svg" alt="" />
  </div>

  <!-- Row #1 -->
  <div class="flex mb-4">
    <div class="w-1/2 mr-8">
      <!-- Callout 1 -->
      <div class="w-full mx-auto lg:max-w-full lg:flex shadow-2xl">
        <div
          class="plan-image h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden bg-center"
          style="background-image: url(https://source.unsplash.com/600x400/?nature)"></div>
        <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
          <div class="mb-8">
            <div class="text-gray-900 font-bold text-xl mb-2">
              Callout 1
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Voluptatibus quia, nulla! Maiores et perferendis eaque,
              exercitationem praesentium nihil.
            </p>
          </div>
        </div>
      </div>
    </div>


    <div class="w-1/2">
      <!-- Callout 2 -->
      <div class="w-full mx-auto lg:max-w-full lg:flex shadow-2xl">
        <div
          class="plan-image h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden bg-center"
          style="background-image: url(https://source.unsplash.com/600x400/?business)"></div>
        <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
          <div class="mb-8">
            <div class="text-gray-900 font-bold text-xl mb-2">
              Callout 2
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Voluptatibus quia, nulla! Maiores et perferendis eaque,
              exercitationem praesentium nihil.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Here is what our callouts now look like.

Now all we have to do is duplicate our 2 callouts and the grid and change the images and titles.

<section class="plan-types relative container mx-auto mt-48 pb-24">
  <!-- Travel Tickets Illustration -->
  <div class="travel-tickets-illustration pt-32">
    <img class="travel-tickets w-1/3 absolute" src="./images/travel-tickets-colour.svg" alt="" />
  </div>

  <!-- Row #1 -->
  <div class="flex mb-4">
    <div class="w-1/2 mr-8">
      <!-- Callout 1 -->
      <div class="w-full mx-auto lg:max-w-full lg:flex shadow-2xl">
        <div
          class="plan-image h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden bg-center"
          style="background-image: url(https://source.unsplash.com/600x400/?nature)"></div>
        <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
          <div class="mb-8">
            <div class="text-gray-900 font-bold text-xl mb-2">
              Callout 1
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Voluptatibus quia, nulla! Maiores et perferendis eaque,
              exercitationem praesentium nihil.
            </p>
          </div>
        </div>
      </div>
    </div>


    <div class="w-1/2">
      <!-- Callout 2 -->
      <div class="w-full mx-auto lg:max-w-full lg:flex shadow-2xl">
        <div
          class="plan-image h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden bg-center"
          style="background-image: url(https://source.unsplash.com/600x400/?business)"></div>
        <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
          <div class="mb-8">
            <div class="text-gray-900 font-bold text-xl mb-2">
              Callout 2
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Voluptatibus quia, nulla! Maiores et perferendis eaque,
              exercitationem praesentium nihil.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Row #2 -->
  <div class="flex mb-4">
    <div class="w-1/2 mr-8">
      <!-- Callout 3 -->
      <div class="w-full mx-auto lg:max-w-full lg:flex shadow-2xl">
        <div
          class="plan-image h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden bg-center"
          style="background-image: url(https://source.unsplash.com/600x400/?ocean)"></div>
        <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
          <div class="mb-8">
            <div class="text-gray-900 font-bold text-xl mb-2">
              Callout 3
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Voluptatibus quia, nulla! Maiores et perferendis eaque,
              exercitationem praesentium nihil.
            </p>
          </div>
        </div>
      </div>
    </div>


    <div class="w-1/2">
      <!-- Callout 4 -->
      <div class="w-full mx-auto lg:max-w-full lg:flex shadow-2xl">
        <div
          class="plan-image h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden bg-center"
          style="background-image: url(https://source.unsplash.com/600x400/?work)"></div>
        <div class="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
          <div class="mb-8">
            <div class="text-gray-900 font-bold text-xl mb-2">
              Callout 4
            </div>
            <p class="text-gray-700 text-base">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Voluptatibus quia, nulla! Maiores et perferendis eaque,
              exercitationem praesentium nihil.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Our final callouts section now looks like:

That's it! Now our callouts sections is complete 🔥


Our travel site so far looks like:


You can download a copy of the completed tutorial by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for this article is 6-callouts-section

robertguss/howtocode.io-tailwind-css-landing-page
HowToCode.io - Tailwind CSS Landing Page Tutorial. Contribute to robertguss/howtocode.io-tailwind-css-landing-page development by creating an account on GitHub.

Or you can do it via git with:

git clone git@github.com:robertguss/howtocode.io-tailwind-css-landing-page.git

git checkout 6-callouts-section