Recreate Google.com with 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.
I've found some things around the web to rebuild with Tailwind. For this article, we'll build Google's home page at. Let's get started!
Fork this CodePen to start:
The header contains a left and right section with a couple links in each. We'll useand the 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.
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.
<!-- 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>
justify-center to center everything horizontally and given some padding to the top with
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%
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
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 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
<!-- 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.
We didn't have to write a single line of custom CSS to recreatewith !
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..
Want to improve your coding and design skills?
I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.
We value your privacy. 1-click unsubscribe.
Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.
In this article...
What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)