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

Login AND Signup
login and signup

Uwera Dorcas

1 year ago

1.3k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

nejaa badr

1 year ago

3.6k
Invoice
simpel invoice digital

Rushikesh Latpate

1 year ago

1.2k
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Sudip chaudhary

1 year ago

1.8k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Rathanak Phan

1 year ago

2k
tab2
table

Anonymous

1 week ago

10
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

nejaa badr

1 year ago

2.3k
Forgot password?
you can change password an time

gidy

1 year ago

1k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Anonymous

1 week ago

49
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Sufyan jutt

10 months ago

730
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

2 months ago

301