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 v3.4. It is responsive.

Other

Author Bishnu Thapa

Tailwind v3.4 1.6k 2

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

Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

5 months ago

534
loginForm2
form

Anonymous

3 weeks ago

169
Login Form (Balsamiq Look)

Ahmad Syaifuddin

11 months ago

1k
Dionysus AI Chat

Maxim

1 year ago

1.2k
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Juan D. Cortorreal

10 months ago

1.2k
3d element

Omer fils ELENGA

10 months ago

822
apply

Anonymous

23 hours ago

6
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

SHARIFUL ISLAM

1 year ago

3.7k
Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.9k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

SHARIFUL ISLAM

1 year ago

2.3k
Visernic Brand Logo | Logo Vector
Official SVG logo of Visernic Limited—a digital solutions agency offering software development, IT consulting, cybersecurity, and digital marketing worldwide. This vector asset is fully scalable and optimized for fast web performance.

Visernic

1 month ago

177
pricing
pricing

Omer fils ELENGA

1 year ago

1.1k