In this lesson, we are going to be building the testimonial 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 6-callouts-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.
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

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 testimonial.html partial in src/partials. Then let's include it in 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>
  <include src="./partials/testimonial.html"></include>

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

</html>

Now let's add in our testimonial markup.

<section class="container mx-auto">
  <div class="testimonial-container w-1/2 mx-auto relative pb-32">
    <p class="testimonial italic text-3xl">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla dolorem, aspernatur odit sit aliquam, natus
      reprehenderit maxime voluptatibus nisi assumenda, sequi velit delectus ducimus neque voluptatum a. Reiciendis,
      obcaecati modi?
    </p>

    <!-- Citation -->
    <div class="flex items-center mt-6">
      <img class="w-10 h-10 rounded-full mr-4" src="./images/jonathan.jpg" alt="Avatar of Jonathan Reinink" />
      <div class="">
        <p class="text-gray-900 leading-none">Larry Silver</p>
        <p class="text-gray-600 text-sm">Aug 18</p>
      </div>
    </div>
  </div>
</section>

Which looks like:

To make this look a little more "designed" we can add a quote svg icon like so:

<section class="container mx-auto">
  <div class="testimonial-container w-1/2 mx-auto relative pb-32">
    <div class="quotes w-24 absolute">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
        viewBox="0 0 100 125" style="fill: #ccc;" xml:space="preserve">
        <path class="st0"
          d="M75.6,40.5c11,0,19.9,9,19.9,20c0,11-9,20-20,20s-20-9-20-20c0-22.1,17.9-40,40-40  C95.5,20.5,82.4,25.4,75.6,40.5z M45.5,60.5c0,11-9,20-20,20s-20-9-20-20l0,0c0-22.1,17.9-40,40-40c0,0-13.1,4.9-19.9,20  C36.6,40.5,45.5,49.5,45.5,60.5z" />
      </svg>
    </div>

    <p class="testimonial italic text-3xl">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla dolorem, aspernatur odit sit aliquam, natus
      reprehenderit maxime voluptatibus nisi assumenda, sequi velit delectus ducimus neque voluptatum a. Reiciendis,
      obcaecati modi?
    </p>

    <!-- Citation -->
    <div class="flex items-center mt-6">
      <img class="w-10 h-10 rounded-full mr-4" src="./images/jonathan.jpg" alt="Avatar of Jonathan Reinink" />
      <div class="">
        <p class="text-gray-900 leading-none">Larry Silver</p>
        <p class="text-gray-600 text-sm">Aug 18</p>
      </div>
    </div>
  </div>
</section>

Which now looks like:

Let's add some custom css to reposition the icon and change the color. Add the following css to main.css

.quotes {
  top: -50px;
  left: -50px;
  z-index: -1;
}

.testimonial {
  z-index: 2;
}

Now our testimonial looks like:

That's it! Now our testimonial section 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 7-testimonial-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 7-testimonial-section