Rohit Yadav

Posted on Mar 4 • Edited on Mar 7

Google UI Clone in HTML and Tailwind CSS

#tailwindcss #html #beginners #webdev

Introduction:

In the world of web development, creating clones of popular websites is a fantastic way to practice and improve your skills. One of the most iconic and widely used websites is Google. In this blog post, we'll walk through the process of building a simplified Google clone using HTML for the structure and Tailwind CSS for styling.

Prerequisites:

Before we start, make sure you have the following installed:

Code editor (e.g., Visual Studio Code, Sublime Text)
Browser (e.g., Chrome, Firefox)
Node.js and npm (for installing Tailwind CSS)

Let's get started:

Step 1: Install Nodejs

Before we proceed with the Google Clone project using HTML and Tailwind CSS, let's ensure that you have Node.js installed on your system. Node.js is required for installing and managing packages, including Tailwind CSS. Follow these steps to install Node.js:

i) Download Node.js:
Visit the official Node.js website: Node.js Downloads

ii) Choose the Appropriate Version:
Select the version that corresponds to your operating system. The website usually recommends the LTS (Long Term Support) version for most users.

iii) Install Node.js:
Follow the installation instructions provided on the website for your specific operating system. The process is typically straightforward, involving accepting the license agreement and choosing the installation directory.

iv) Verify Installation:
Open a terminal or command prompt and run the following commands to verify that Node.js and npm (Node Package Manager) are installed successfully:

node -v

npm -v

If installed correctly, these commands should display the installed Node.js and npm versions.

Now that you have Node.js installed, you can proceed with the Google Clone project using HTML and Tailwind CSS as outlined in the initial steps of the blog post. If you encounter any issues during installation, refer to the official Node.js documentation or seek help from the Node.js community.

Once Node.js is installed, continue with the remaining steps in the blog post to set up the project and create the Google Clone.

Step 2: Set Up Your Project

To ensure a smooth setup for your project, follow these steps carefully:

i) Create Project Structure:
Open your terminal and navigate to the desired location for your project. Create a new folder for your project and open it in your code editor. Inside this project folder, create another folder named src. This is where your source code will reside.

mkdir my-google-clone
cd my-google-clone
mkdir src

ii) Create Files:
Inside the src folder, create two files: index.html for HTML content and input.css for your Tailwind CSS input.

cd src
touch index.html input.css

iii) Initialize npm and Install Tailwind CSS:
Back in the root folder, initialize npm and install Tailwind CSS as development dependencies.

npm init -y
npm install -D tailwindcss
npx tailwindcss init

iv) Configure tailwind.config.js:
Open the tailwind.config.js file created in your project root and replace its content with the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
 theme: {
    extend: {},
  },
  plugins: [],
}

v) Setup input.css in src folder:
Open the input.css file inside the src folder and paste the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

vi) Watch for Changes:
Run the following command in your terminal to watch for changes in your CSS file and automatically generate the output:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

vii) Link CSS in index.html:
In your index.html file, link the generated output.css:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="src/output.css">
   <title>Google</title>
</head>
<body>

   <!-- Your content goes here -->

</body>
</html>

With these steps completed, your project is set up and ready for building the Google Clone using HTML and Tailwind CSS.

Step 3: Add Favicon and Title

Ensure a polished and professional appearance for your project by incorporating a favicon and setting an appropriate title in your index.html file. Follow the refined HTML structure below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://www.google.com/favicon.ico" type="image/x-icon">
    <title>Google Clone</title>
    <link rel="stylesheet" href="./output.css">
</head>
<body>

    <!-- Your content goes here -->

</body>
</html>

In this improved version:

i) Favicon Update:

The type="image/x-icon" attribute has been added to explicitly declare the favicon's file type.
The comment indicates where you can insert the specific path or URL for your favicon.

ii) Title Enhancement:

The title has been modified to "Google Clone" to better reflect the nature of your project.
This title serves as an identifier for your web page, especially when users have multiple tabs open.

iii) Stylesheet Link:

The link to the stylesheet (output.css) remains intact, ensuring that your Tailwind CSS styles are applied consistently.

Feel free to customize the favicon and title according to your project's theme and branding. This step contributes to a more professional and cohesive web application.

Step 4: Create the HTML Structure and Add Styling to the Container

To ensure a well-organized and visually appealing layout, let's refine the HTML structure and enhance the styling for the container in your index.html file:

<div class="container flex flex-col justify-between h-screen bg-[#202124] text-white">
        <div class="top">
            <a href="#">Gmail</a>
            <a href="#">Images</a>
            <p>
                <svg class="gb_g" focusable="false" height="24px" viewBox="0 0 24 24" width="24px" fill="white">
                    <path
                       d="M22.29,18.37a2,2,0,0,0,0-.24,4.3,4.3,0,0,0-.09-.47c-.05-.15-.11-.31-.17-.46a3.88,3.88,0,0,0-.24-.45l-6.3-8.94V3.64h1.48a.92.92,0,0,0,0-1.84H7.36a.92.92,0,0,0,0,1.84H8.84V7.81L2.55,16.75a2.17,2.17,0,0,0-.24.45,2.85,2.85,0,0,0-.17.46A3.89,3.89,0,0,0,2,18.6c0,.08,0,.16,0,.23A3.8,3.8,0,0,0,2.26,20a3.6,3.6,0,0,0,.59,1,2.5,2.5,0,0,0,.32.33,2.54,2.54,0,0,0,.36.29,3.89,3.89,0,0,0,.4.25,4.28,4.28,0,0,0,.43.19,3.76,3.76,0,0,0,1.22.21H18.72A3.67,3.67,0,0,0,19.94,22l.44-.19a3.64,3.64,0,0,0,1.8-2.28,3.2,3.2,0,0,0,.11-.69,1.69,1.69,0,0,0,0-.23A1.77,1.77,0,0,0,22.29,18.37Zm-1.95.44a.78.78,0,0,1-.05.18l0,.08a.78.78,0,0,0-.05.14,2.09,2.09,0,0,1-.46.64l-.09.08a.88.88,0,0,1-.17.12l-.15.09-.11.06-.25.09a2.33,2.33,0,0,1-.53.07H5.85a1.27,1.27,0,0,1-.28,0,1.93,1.93,0,0,1-.73-.26A.91.91,0,0,1,4.68,20l-.23-.2h0a2.21,2.21,0,0,1-.3-.45l-.06-.12a1.77,1.77,0,0,1-.15-.65,1.88,1.88,0,0,1,.3-1.12l0-.05L10.67,8.5h0V3.64h2.95V8.49h0l6.44,8.92a2.38,2.38,0,0,1,.17.31,2.12,2.12,0,0,1,.14.68A2.58,2.58,0,0,1,20.34,18.81Z">
                    </path>
                    <path d="M5.66,17.74A.82.82,0,0,0,6.36,19H17.94a.82.82,0,0,0,.7-1.26l-4.1-5.55H9.76Z"></path>
                </svg>
            </p>
            <img src="https://lh3.googleusercontent.com/ogw/AF2bZygffze6fXhK7PI86Z_QjVt-8SSQeQyBJ9AV7pTbMg=s32-c-mo">
        </div>
        <div class="middle">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png"
                alt="Google" width="272px">
            <input type="text" class="input-box">
            <div>
                <button
                    class="btn">Google
                    Search</button>
                <button
                    class="btn">I'm
                    Feeling Lucky</button>
            </div>
            <div class="languages">
                <p>Google offered in:</p>
                <p>हिन्दी বাংলা తెలుగు मराठी தமிழ் ગુજરાતી ಕನ್ನಡ മലയാളം ਪੰਜਾਬੀ</p>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom-top">
                <p>India</p>
            </div>
            <div class="bottom-bottom">
                <div class="bottom-bottom-left">
                    <a href="#">About</a>
                    <a href="#">Advertising</a>
                    <a href="#">Business</a>
                    <a href="#">How Search works</a>
                </div>
                <div class="bottom-bottom-right">
                    <a href="#">Privacy</a>
                    <a href="#">Terms</a>
                    <a href="#">Settings</a>
                </div>
            </div>
        </div>
    </div>

Step 5: Add Styling to Top Container

Let's refine the styling of the top container to ensure a polished and visually appealing design in your index.html file:

<div class="top flex gap-4 justify-end mt-5 mr-6 text-sm">
            <a href="#" class="hover:underline">Gmail</a>
            <a href="#" class="hover:underline">Images</a>
            <p class="hover:bg-gray-800 cursor-pointer p-2 rounded-full -mt-2">
                <svg class="gb_g" focusable="false" height="24px" viewBox="0 0 24 24" width="24px" fill="white">
                    <path
                        d="M22.29,18.37a2,2,0,0,0,0-.24,4.3,4.3,0,0,0-.09-.47c-.05-.15-.11-.31-.17-.46a3.88,3.88,0,0,0-.24-.45l-6.3-8.94V3.64h1.48a.92.92,0,0,0,0-1.84H7.36a.92.92,0,0,0,0,1.84H8.84V7.81L2.55,16.75a2.17,2.17,0,0,0-.24.45,2.85,2.85,0,0,0-.17.46A3.89,3.89,0,0,0,2,18.6c0,.08,0,.16,0,.23A3.8,3.8,0,0,0,2.26,20a3.6,3.6,0,0,0,.59,1,2.5,2.5,0,0,0,.32.33,2.54,2.54,0,0,0,.36.29,3.89,3.89,0,0,0,.4.25,4.28,4.28,0,0,0,.43.19,3.76,3.76,0,0,0,1.22.21H18.72A3.67,3.67,0,0,0,19.94,22l.44-.19a3.64,3.64,0,0,0,1.8-2.28,3.2,3.2,0,0,0,.11-.69,1.69,1.69,0,0,0,0-.23A1.77,1.77,0,0,0,22.29,18.37Zm-1.95.44a.78.78,0,0,1-.05.18l0,.08a.78.78,0,0,0-.05.14,2.09,2.09,0,0,1-.46.64l-.09.08a.88.88,0,0,1-.17.12l-.15.09-.11.06-.25.09a2.33,2.33,0,0,1-.53.07H5.85a1.27,1.27,0,0,1-.28,0,1.93,1.93,0,0,1-.73-.26A.91.91,0,0,1,4.68,20l-.23-.2h0a2.21,2.21,0,0,1-.3-.45l-.06-.12a1.77,1.77,0,0,1-.15-.65,1.88,1.88,0,0,1,.3-1.12l0-.05L10.67,8.5h0V3.64h2.95V8.49h0l6.44,8.92a2.38,2.38,0,0,1,.17.31,2.12,2.12,0,0,1,.14.68A2.58,2.58,0,0,1,20.34,18.81Z">
                    </path>
                    <path d="M5.66,17.74A.82.82,0,0,0,6.36,19H17.94a.82.82,0,0,0,.7-1.26l-4.1-5.55H9.76Z"></path>
                </svg>
            </p>
            <img class="rounded-full -mt-1"
                src="https://lh3.googleusercontent.com/ogw/AF2bZygk3RIBDBQh5DW7mjofxL64jZjLSOYU1zw65B7G=s32-c-mo">
        </div>

Step 6: Add Styling to Middle Container

<div class="middle flex flex-col justify-evenly items-center h-80 -mt-48">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png"
                alt="Google" width="272px">
            <div class="">
                <span class="h-5 w-5 absolute mt-9 -ml-[17rem]">
                    <svg focusable="false" fill="#9aa0a6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                            d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
                        </path>
                    </svg>
                </span>
                <span class="h-6 w-6 absolute mt-8 ml-[15.5rem]">
                    <svg focusable="false" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
                        <rect fill="none" height="192" width="192"></rect>
                        <g>
                            <circle fill="#34a853" cx="144.07" cy="144" r="16"></circle>
                            <circle fill="#4285f4" cx="96.07" cy="104" r="24"></circle>
                            <path fill="#ea4335"
                                d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z">
                            </path>
                            <path fill="#fbbc04"
                                d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.8,0,16,8.29,16,18v30h16V72.8z">
                            </path>
                            <path fill="#4285f4"
                                d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z">
                            </path>
                        </g>
                    </svg>
                </span>
                <span class="h-6 w-6 absolute mt-8 ml-[13rem]">
                    <svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path fill="#4285f4"
                            d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z">
                        </path>
                        <path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
                        <path fill="#fbbc04"
                            d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z">
                        </path>
                        <path fill="#ea4335"
                            d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z">
                        </path>
                    </svg>
                </span>
            </div>
            <input type="text"
                class="w-[575px] bg-[#202124] border border-gray-500 text-white pl-12 pr-20 py-3 rounded-full hover:bg-[#303134] outline-none">
            <div>
                <button
                    class="px-4 py-2 bg-[#303134] rounded border border-[#202124] hover:border hover:border-gray-500 mx-2 text-sm">Google
                    Search</button>
                <button
                    class="px-4 py-2 bg-[#303134] rounded border border-[#202124] hover:border hover:border-gray-500 text-sm">I'm
                    Feeling Lucky</button>
            </div>
            <div class="flex gap-3">
                <p class="text-gray-400 text-sm">Google offered in:</p>
                <p class="text-[#8ab4f8] text-sm">हिन्दी বাংলা తెలుగు मराठी தமிழ் ગુજરાતી ಕನ್ನಡ മലയാളം ਪੰਜਾਬੀ</p>
            </div>
        </div>

Step 7: Add Styling to Bottom Container

To enhance the styling of the bottom container in your Google Clone project, update the HTML structure and apply Tailwind CSS classes. Here's the refined version:

<div class="bottom bg-[#171717] text-sm">
            <div class="bottom-top p-3">
                <span class="pl-6 cursor-pointer">India</span>
            </div>
            <div class="p-3 flex justify-between border-t-2 border-gray-700">
                <div class="flex gap-8">
                    <a href="#" class="pl-6">About</a>
                    <a href="#" class="hover:underline">Advertising</a>
                    <a href="#" class="hover:underline">Business</a>
                    <a href="#" class="hover:underline">How Search works</a>
                </div>
                <div class="flex gap-8">
                    <a href="#" class="hover:underline">Privacy</a>
                    <a href="#" class="hover:underline">Terms</a>
                    <a href="#" class="hover:underline">Settings</a>
                </div>
            </div>
        </div>

Step 8: Full HTML Code version

This includes the structure and styles for all the mentioned containers in your Google Clone project. Feel free to adjust or modify it based on your specific requirements.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://www.google.com/favicon.ico">
    <title>Google</title>
    <link href="./output.css" rel="stylesheet">
</head>

<body>
    <div class="flex flex-col justify-between h-screen bg-[#202124] text-white">
        <div class="top flex gap-4 justify-end mt-5 mr-6 text-sm">
            <a href="#" class="hover:underline">Gmail</a>
            <a href="#" class="hover:underline">Images</a>
            <p class="hover:bg-gray-800 cursor-pointer p-2 rounded-full -mt-2">
                <svg class="gb_g" focusable="false" height="24px" viewBox="0 0 24 24" width="24px" fill="white">
                    <path
                        d="M22.29,18.37a2,2,0,0,0,0-.24,4.3,4.3,0,0,0-.09-.47c-.05-.15-.11-.31-.17-.46a3.88,3.88,0,0,0-.24-.45l-6.3-8.94V3.64h1.48a.92.92,0,0,0,0-1.84H7.36a.92.92,0,0,0,0,1.84H8.84V7.81L2.55,16.75a2.17,2.17,0,0,0-.24.45,2.85,2.85,0,0,0-.17.46A3.89,3.89,0,0,0,2,18.6c0,.08,0,.16,0,.23A3.8,3.8,0,0,0,2.26,20a3.6,3.6,0,0,0,.59,1,2.5,2.5,0,0,0,.32.33,2.54,2.54,0,0,0,.36.29,3.89,3.89,0,0,0,.4.25,4.28,4.28,0,0,0,.43.19,3.76,3.76,0,0,0,1.22.21H18.72A3.67,3.67,0,0,0,19.94,22l.44-.19a3.64,3.64,0,0,0,1.8-2.28,3.2,3.2,0,0,0,.11-.69,1.69,1.69,0,0,0,0-.23A1.77,1.77,0,0,0,22.29,18.37Zm-1.95.44a.78.78,0,0,1-.05.18l0,.08a.78.78,0,0,0-.05.14,2.09,2.09,0,0,1-.46.64l-.09.08a.88.88,0,0,1-.17.12l-.15.09-.11.06-.25.09a2.33,2.33,0,0,1-.53.07H5.85a1.27,1.27,0,0,1-.28,0,1.93,1.93,0,0,1-.73-.26A.91.91,0,0,1,4.68,20l-.23-.2h0a2.21,2.21,0,0,1-.3-.45l-.06-.12a1.77,1.77,0,0,1-.15-.65,1.88,1.88,0,0,1,.3-1.12l0-.05L10.67,8.5h0V3.64h2.95V8.49h0l6.44,8.92a2.38,2.38,0,0,1,.17.31,2.12,2.12,0,0,1,.14.68A2.58,2.58,0,0,1,20.34,18.81Z">
                    </path>
                    <path d="M5.66,17.74A.82.82,0,0,0,6.36,19H17.94a.82.82,0,0,0,.7-1.26l-4.1-5.55H9.76Z"></path>
                </svg>
            </p>
            <img class="rounded-full -mt-1"
                src="https://lh3.googleusercontent.com/ogw/AF2bZygk3RIBDBQh5DW7mjofxL64jZjLSOYU1zw65B7G=s32-c-mo">
        </div>
        <div class="middle flex flex-col justify-evenly items-center h-80 -mt-48">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png"
                alt="Google" width="272px">
            <div class="">
                <span class="h-5 w-5 absolute mt-9 -ml-[17rem]">
                    <svg focusable="false" fill="#9aa0a6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                            d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
                        </path>
                    </svg>
                </span>
                <span class="h-6 w-6 absolute mt-8 ml-[15.5rem]">
                    <svg focusable="false" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
                        <rect fill="none" height="192" width="192"></rect>
                        <g>
                            <circle fill="#34a853" cx="144.07" cy="144" r="16"></circle>
                            <circle fill="#4285f4" cx="96.07" cy="104" r="24"></circle>
                            <path fill="#ea4335"
                                d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z">
                            </path>
                            <path fill="#fbbc04"
                                d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.8,0,16,8.29,16,18v30h16V72.8z">
                            </path>
                            <path fill="#4285f4"
                                d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z">
                            </path>
                        </g>
                    </svg>
                </span>
                <span class="h-6 w-6 absolute mt-8 ml-[13rem]">
                    <svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path fill="#4285f4"
                            d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z">
                        </path>
                        <path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
                        <path fill="#fbbc04"
                            d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z">
                        </path>
                        <path fill="#ea4335"
                            d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z">
                        </path>
                    </svg>
                </span>
            </div>
            <input type="text"
                class="w-[575px] bg-[#202124] border border-gray-500 text-white pl-12 pr-20 py-3 rounded-full hover:bg-[#303134] outline-none">
            <div>
                <button
                    class="px-4 py-2 bg-[#303134] rounded border border-[#202124] hover:border hover:border-gray-500 mx-2 text-sm">Google
                    Search</button>
                <button
                    class="px-4 py-2 bg-[#303134] rounded border border-[#202124] hover:border hover:border-gray-500 text-sm">I'm
                    Feeling Lucky</button>
            </div>
            <div class="flex gap-3">
                <p class="text-gray-400 text-sm">Google offered in:</p>
                <p class="text-[#8ab4f8] text-sm">हिन्दी বাংলা తెలుగు मराठी தமிழ் ગુજરાતી ಕನ್ನಡ മലയാളം ਪੰਜਾਬੀ</p>
            </div>
        </div>
        <div class="bottom bg-[#171717] text-sm">
            <div class="bottom-top p-3">
                <span class="pl-6 cursor-pointer">India</span>
            </div>
            <div class="p-3 flex justify-between border-t-2 border-gray-700">
                <div class="flex gap-8">
                    <a href="#" class="pl-6">About</a>
                    <a href="#" class="hover:underline">Advertising</a>
                    <a href="#" class="hover:underline">Business</a>
                    <a href="#" class="hover:underline">How Search works</a>
                </div>
                <div class="flex gap-8">
                    <a href="#" class="hover:underline">Privacy</a>
                    <a href="#" class="hover:underline">Terms</a>
                    <a href="#" class="hover:underline">Settings</a>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Preview:

This image shows the final product we made in this blog

Conclusion:

Building a Google clone using HTML and Tailwind CSS is a great way to practice front-end development skills. This tutorial provides a basic structure, but you can expand and enhance it to make your clone more realistic. Keep experimenting, and happy coding!

Next : Facebook Page UI Clone

Next : Calculator UI

Top comments (17)

Ben Sinclair • Mar 4

This is a good way to learn Tailwind, but not HTML - approaches like these throw away any semantic content in favour of div elements everywhere, and I think it's a much better idea for people starting out to learn how to construct a document first, rather than see it as some optional "nice to have" they might do later.

I realise it's not the point of the exercise, but if you style semantic elements then you don't need any of the Tailwind stuff anyway.

Tyler V. (he/him) • Mar 5

if you style semantic elements then you don't need any of the Tailwind stuff anyway

Using semantic elements is not related to using Tailwind - semantic elements should be used with Tailwind and can even make applying the Tailwind styles easier.

Ben Sinclair • Mar 5

But they aren't, though, in the real world. People who use Tailwind almost exclusively use it with div soup since you're encouraged to make a lot of wrapper divs.

Tyler V. (he/him) • Mar 5

I'm not sure why you think that Tailwind encourages creating "a lot" of wrapper divs?

Since it's a utility framework anything it's doing is transferable to using style="" or a class on the same element where it's applied, so any "div soup" is still just an issue with the HTML directly, not Tailwind.

Ben Sinclair • Mar 6

You're right in principle, but if you look at anything that's been styled with Tailwind you'll see what I mean.

Tyler V. (he/him) • Mar 6

You're still putting the blame on Tailwind when the issue is with HTML.

It's fine if you don't like Tailwind because of whatever reason. But that doesn't mean that anyone that uses it can't write clean HMTL.

Ben Sinclair • Mar 6

Anyone can write clean HTML. The people who are writing things like Tailwind (and a bunch of other things, like React components for example) are typically not doing that, though. Almost all the Tailwind tutorials you'll find use DIV soup, and people starting out with it just follow suit.

Tyler V. (he/him) • Mar 7

Let's stop making assumptions about people that use specific tools - Thanks.

Rohit Yadav • Mar 4

Thanks, Ben! I'll make sure to include more emphasis on semantic content in future tutorials. Appreciate your feedback!

Meenakshi Agarwal • Mar 5

Your Google UI Clone tutorial is fantastic! The clarity in instructions makes it super easy. Including a bit more detail on Tailwind CSS classes would have been helpful for a deeper understanding.