We're live-coding on Twitch! Join us! FREE Webinar: Should I use React or Vue?

Recreate Google.com with Tailwind CSS

Code Demo

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff.

The more I have used Tailwind, the more I have liked it. It lets me design my UI quicker than ever before. People say that CSS frameworks will make you not know the underlying CSS. With Tailwind, I believe you need to know your CSS even better to be able to use the utility classes.

Let's recreate something with Tailwind so that we can practice.

What We'll Build

I've found some things around the web to rebuild with Tailwind. For this article, we'll build Google's home page at google.com. Let's get started!

We tried building this on a Twitch stream. Check out the stream to see us trying this live!

We'll do all of our work inside of CodePen. It's a great place to experiment with HTML/CSS/JavaScript projects.

Fork this CodePen to start: https://codepen.io/chrisoncode/pen/mdyoGar

React LogoReact Logo
Upgrade Your JS
Go from vanilla JavaScript 👉 React

Here's the final CodePen:

Creating the Header

The header contains a left and right section with a couple links in each. We'll use CSS flexbox and the justify-content property to make the left and right sections.

Here's the HTML for our header. Place this in the html section of our CodePen.

<div class="flex justify-between text-sm text-gray-700">
    <div>
        left side of nav
    </div>
    <div>
        right side of nav
    </div>
</div>

Here are the Tailwind classes we're using:

  • flex: Set display to be flex so that children divs will sit next to each other
  • justify-between: Use justify-content to set children divs to the left and right
  • text-sm: Smaller font size
  • text-gray-700: Text color is a little lighter than black

Now we can add the links and style those:

<!-- header -->
<div class="flex justify-between text-sm text-gray-700">
  <div class="flex items-center">
    <a class="block p-3">About</a>
    <a class="block p-3">Store</a>
  </div>

  <div class="flex items-center">
    <a class="block p-3">Gmail</a>
    <a class="block p-3">Images</a>
    <img class="rounded-full block py-3 px-4" src="https://lh3.googleusercontent.com/-qKDxtPVf3MA/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdxXjFhEvxN4q1JUHeo4xlUIanULA.CMID/s64-c/photo.jpg">
  </div>
</div>

We've styled our left and right navigation items and the links. We've also added an image for the avatar.

https://i.imgur.com/ES1qCCS.png\]\(https://i.imgur.com/ES1qCCS.png\)

Creating the Main Section

The main section consists of a logo, an input box, and two buttons. Here's the HTML for this including the Google logo image.

<!-- main -->
<div>
  <div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

    <div>
      <div>🕵️‍</div>
      <input type="text">
      <div>🎤</div>
    </div>

    <div>
      <button>Google Search</button>
      <button>I'm Feeling Lucky</button>
    </div>
  </div>
</div>

Now that we have the HTML ready. We can add the styling with our Tailwind classes.

The Container

<!-- main -->
<div class="flex justify-center pt-20">
  <div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

    <div>
      <div>🕵️‍</div>
      <input type="text">
      <div>🎤</div>
    </div>

    <div>
      <button>Google Search</button>
      <button>I'm Feeling Lucky</button>
    </div>
  </div>
</div>

We've added flex and justify-center to center everything horizontally and given some padding to the top with p-20.

The Image

We need to restrict the width of the image and also center it.

<img class="w-2/3 ml-auto mr-auto mb-6" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

We've used the following classes:

  • w-2/3: Set the width to be 66%
  • ml-auto and mr-auto: Setting the margin left and right to auto so we can center the image
  • mb-6: Adding some margin to the bottom of the image so there is spacing between the image and the search box.

The search box is the interesting part of the entire design. We could style the <input> or we could style the <div> that contains the input. We'll style the div because it is easier to style the div with everything we need. Inputs inherently bring on a lot of styling for things like focus and active. Divs don't bring any styling that we need to override.

We'll style the div using Tailwind classes for padding, border, rounded corners, and shadows.

<div class="flex border border-gray-200 rounded-full p-4 shadow text-xl">
  <div>🕵️‍</div>
  <input type="text" class="w-full outline-none px-3">
  <div>🎤</div>
</div>

We've also styled the input box to remove the outline. It would be a proper next step to give this input some focus styling for accessibility.

The Buttons

The last step is to style the buttons. We need to make sure they are aligned to the center of our page. We will also style the buttons to be gray.

<div class="mt-8 text-center">
  <button class="mr-3 bg-gray-200 border border-gray-300 py-3 px-4 rounded hover:bg-gray-400 hover:border-gray-500">Google Search</button>
  <button class="bg-gray-200 border border-gray-300 py-3 px-4 rounded hover:bg-gray-400 hover:border-gray-500">I'm Feeling Lucky</button>
</div>

We've also added some hover psuedo classes so that our buttons will get a little darker when they are hovered.

  • bg-gray-200: Gray background
  • border: 1px border all the way around
  • border-gray-300: Color the border a light gray (a little darker than the background)
  • rounded: Give a small border radius for rounded corners
  • py-3 px-4: Give some padding to the button
  • hover:bg-gray-400: Darker gray on hover
  • hover:border-gray-500: Darker border color on hover.

Here's what our entire middle section looks like:

The footer will be similar to the header except it will be fixed to the bottom and also have a gray background.

To fix it to the bottom we'll use fixed and bottom-0.

<!-- footer -->
<div class="fixed bottom-0 bg-gray-200 border-t w-full flex justify-between text-gray-600 text-xs">
  <div class="flex">
    <a class="block p-3">Advertising</a>
    <a class="block p-3">Business</a>
    <a class="block p-3">How Search Works</a>
  </div>

  <div class="flex">
    <a class="block p-3">Privacy</a>
    <a class="block p-3">Terms</a>
    <a class="block p-3">Settings</a>
  </div>
</div>

We are using the same techniques as the header to make our nav items spread to the left and right.

Conclusion

We didn't have to write a single line of custom CSS to recreate google.com with Tailwind CSS!

Hope you enjoyed this tutorial and gained some more knowledge and familiarity with Tailwind. We have a similar tutorial where we rebuilt the Twitter Creation Modal. Check out the tutorial.

Like this article? Follow @chrisoncode on Twitter