Tailwind CSS Travel Site - 3. Quote Form

In this lesson, we are going to be building the quote form.

The final result will look like:

You can pick up where we last left off, by cloning the previous tutorial's branch with git.

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

git checkout 2-nav-and-hero

First, let's create a new partial for the quote form. Create a new file called quote-form.html in src/partials. Then include this new file 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>

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

Inside of our new partial we will add the following markup

<section
  class="quote-form flex items-center justify-center p-12 container mx-auto rounded-lg h-24 bg-gray-200"
></section>

Tailwind CSS classes:

Class	Value
flex	display: flex;
items-center	align-items: center;
justify-center	justify-content: center;
p-12	padding: 3rem;
container	https://tailwindcss.com/docs/container/#app
mx-auto	margin-right: auto; margin-left: auto;
rounded-lg	border-radius: 0.5rem;
h-24	height: 6rem;
bg-gray-200	background-color: #edf2f7;

We also need to add a small amount of custom css to bring the quote form up slightly. Add the following css to main.css

.quote-form {
  margin-top: -45px;
  opacity: 0.99;
  z-index: 10;
}

The quote form should look like this:

Next, we will add our first input for our quote form. It will act as a place for the user to enter in the destination they would like to travel to.

Add the following markup in between the <section> we just created:

<input
  class="shadow rounded py-2 px-3 text-gray-700 w-1/4"
  type="text"
  placeholder="Where are you going?"
/>

Tailwind CSS classes:

Class	Value
shadow	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
rounded	border-radius: 0.25rem;
py-2	padding-top: 0.5rem; padding-bottom: 0.5rem;
px-3	padding-right: 0.75rem; padding-left: 0.75rem;
text-gray-700	color: #4a5568;
w-1/4	width: 25%;

The quote form should look like this:

For the sake of simplicity, we can duplicate this first input 2 more times for both of our date inputs. We just need to change the type from type="text" to type="date" like so:

<input class="shadow rounded py-2 px-3 text-gray-700 w-1/4" type="date" />
<input class="shadow rounded py-2 px-3 text-gray-700 w-1/4" type="date" />

So our entire quote form markup should look like this:

<section
  class="quote-form flex items-center justify-center p-12 container mx-auto rounded-lg h-24 bg-gray-200"
>
  <input
    class="shadow rounded py-2 px-3 text-gray-700 w-1/4"
    type="text"
    placeholder="Where are you going?"
  />
  <input class="shadow rounded py-2 px-3 text-gray-700 w-1/4" type="date" />
  <input class="shadow rounded py-2 px-3 text-gray-700 w-1/4" type="date" />
</section>

And our quote form now looks like:

Let's add the final piece, the submit button.

<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/4"
>
  Submit
</button>

Tailwind CSS classes:

Class	Value
bg-blue-500	background-color: #a0aec0;
hover:bg-blue-700	hover:background-color: #4a5568;
text-white	color: #fff;
font-bold	font-weight: 700;
py-2	padding-top: 0.5rem; padding-bottom: 0.5rem;
px-4	padding-right: 1rem; padding-left: 1rem;
rounded	border-radius: 0.25rem;
w-1/4	width: 25%;

Finally, we will add some margin to the right of each element to provide some spacing between each form field by adding the class mr-8 to each input element.

<section
  class="quote-form flex items-center justify-center p-12 container mx-auto rounded-lg h-24 bg-gray-200"
>
  <input
    class="shadow rounded py-2 px-3 text-gray-700 w-1/4 mr-8"
    type="text"
    placeholder="Where are you going?"
  />
  <input
    class="shadow rounded py-2 px-3 text-gray-700 w-1/4 mr-8"
    type="date"
  />
  <input
    class="shadow rounded py-2 px-3 text-gray-700 w-1/4 mr-8"
    type="date"
  />
  <button
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/4"
  >
    Submit
  </button>
</section>

Our finished quote form 😎

You can download a copy of the completed tutorial from the repo here. Each section of the tutorial is within its own branch. The branch for this article is 3-quote-form

Or you can do it via git with:

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

git checkout 3-quote-form