Home
Bishnu Thapa
google clone page

google clone page

This HTML page includes:

The Google logo with the correct colors
A search input field with microphone and camera icons
"Google Search" and "Win Freeing Lucky" buttons
The text "With new The ZGS Breakthrough Plus cabinets today's where business ?"
Footer with all the links shown in the image: Advertising, Business, New Search works, Privacy, Terms, Settings
The climate action text in the footer

The layout is responsive and uses Tailwind CSS for styling. The colors match Google's brand colors, and the overall structure matches what's shown in the image.

This tailwind example is contributed by Bishnu Thapa, on 14-Apr-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Bishnu Thapa

852

Fork Fullscreen

<div class="bg-white min-h-screen flex flex-col items-center">
   <header class="w-full flex justify-end p-4 space-x-4 text-sm">
        <a href="#" class="text-gray-600 hover:underline">About</a>
        <a href="#" class="text-gray-600 hover:underline">Store</a>
    </header>

<div class="flex justify-center mt-8 space-x-2">
                <button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded text-sm text-gray-800">Google Search</button>
                <button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded text-sm text-gray-800">Win Freeing Lucky</button>
            </div>
        </div>

<div class="mt-8 text-center text-sm text-gray-600 max-w-lg px-4">
            <p>With new The ZGS Breakthrough Plus cabinets today's where business ?</p>
        </div>
    </main>

<footer class="w-full bg-gray-100 py-3 px-4">
        <div class="flex flex-col md:flex-row md:justify-between">
            <div class="flex justify-center md:justify-start space-x-4 text-sm text-gray-600 mb-2 md:mb-0">
                <a href="#" class="hover:underline">Advertising</a>
                <a href="#" class="hover:underline">Business</a>
                <a href="#" class="hover:underline">New Search works</a>
            </div>
            <div class="text-center text-sm text-gray-600 mb-2 md:mb-0">
                Our third decade of climate action: join us
            </div>
            <div class="flex justify-center md:justify-end space-x-4 text-sm text-gray-600">
                <a href="#" class="hover:underline">Privacy</a>
                <a href="#" class="hover:underline">Terms</a>
                <a href="#" class="hover:underline">Settings</a>
            </div>
        </div>
    </footer>
</div>

Related Examples