Design a Google Template in Tailwind CSS

Last Updated : 04 Mar, 2024

The Tailwind CSS is a popular utility-first CSS framework that provides low-level utility classes to the style web applications. Using Tailwind CSS we will design a Google template. The template will mimic the layout and styling of Google’s search engine’s homepage.

Output Preview: Let us have a look at how the final output will look like.

Preview

Approach to create Google Template

Define the basic HTML structure including the search bar, search button, and other elements.
Apply Tailwind CSS utility classes to style the elements and achieve the desired layout.
Customize the colors, fonts, and other design aspects to match the Google theme.
Ensure that the template is responsive and looks good on the various screen sizes.
Add interactivity to the search bar and button using JavaScript for a better user experience.
Test the template across different browsers and devices to ensure compatibility and responsiveness.

Example: Illustration of Designing a Google template in Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Google Chrome Template</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .search-input-section {
            border-radius: 40px;
        }
    </style>
</head>
 
<body class="bg-white font-sans">
    <nav class="site-navigation py-4">
        <div class="container mx-auto flex items-center
                    justify-between px-5">
            <a href="#" class="font-semibold text-lg"></a>
            <div class="flex items-center space-x-4">
                <a href="#" class="text-sm text-gray-500
                                   hover:text-blue-500 ml-auto">
                    Gmail
                </a>
                <a href="#" class="text-sm text-gray-500
                                   hover:text-blue-500">
                    Images
                </a>
                <a href="#" class="text-gray-700 
                                   hover:text-blue-500">
                </a>
                <button class="sign-in-btn bg-blue-500 text-white 
                               px-4 py-2 rounded-lg hover:bg-blue-600
                               focus:outline-none">
                    Sign in
                </button>
            </div>
        </div>
    </nav>
    <main class="container mx-auto flex flex-col 
                 items-center justify-center py-16">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240226180944/social-(2).png"
             alt="Google"
             class="w-64 mb-8">
        <section class="search-input-section bg-white border
                        border-gray-200 shadow-md rounded-full
                        flex items-center w-96">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240226181137/zoom-lens.png"
                 alt="Search Icon"
                 class="w-6 mx-4">
            <input type="text"
                   placeholder="Search Google or type a URL"
                   class="search-input flex-1 py-4 
                          focus:outline-none rounded-full">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240226181310/mic.png"
                 alt="Google Mic"
                 class="w-6 mx-4">
        </section>
        <section class="buttons-section mt-8">
            <button class="google-search-btn bg-white text-gray-700
                           px-6 py-3 rounded-lg mr-4 hover:bg-gray-100
                           focus:outline-none">
                Google Search
            </button>
            <button class="feeling-lucky-btn bg-white text-gray-700
                           px-6 py-3 rounded-lg hover:bg-gray-100 
                           focus:outline-none">
                I'm Feeling Lucky
            </button>
        </section>
        <div class="customize_size absolute bottom-10 right-10
                    bg-blue-300 px-4 py-2 rounded-lg text-sm 
                    text-gray-700">
            Customize Chrome
        </div>
    </main>
</body>
 
</html>