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

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

Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

8 months ago

824
Contact Page

Author:
Sedat Kumcu

1 year ago

1.7k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

11 months ago

998
background animation
background animation

Author:
Anonymous

3 months ago

448
status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

1 year ago

1.3k
Payment success page example

Author:
Anonymous

9 months ago

1.5k
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

9 months ago

1k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

1 year ago

1.4k
barbershop

Author:
Ishimwe Shadad

3 months ago

423
htmlcss2

Author:
Elsa Khan

8 months ago

248
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

21.3k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

10 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components