Google.com search page clone

This tailwind example is contributed by Mr Robot, on 13-Jul-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is copy

Clone

Author Mr Robot

Tailwind v3.4 12.1k 16

Fork Fullscreen

<div class="flex justify-between text-sm text-gray-700">
    <div class="flex items-center">
        <a class="block p-3">About</a>
        <a class="block p-3">Store</a>
    </div>
    <div class="flex items-center">
        <a class="block p-3">Gmail</a>
        <a class="block p-3">Images</a>
        <img class="rounded-full block py-3 px-4" src="https://lh3.googleusercontent.com/-qKDxtPVf3MA/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdxXjFhEvxN4q1JUHeo4xlUIanULA.CMID/s64-c/photo.jpg">
    </div>
</div>

<div class="flex justify-center pt-20">
    <div>
        <img class="w-2/3 ml-auto mr-auto mb-6" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
        <div class="flex border border-gray-200 rounded-full p-4 shadow text-xl">
            <div>🕵️‍</div>
            <input type="text" class="w-full outline-none px-3">
            <div>🎤</div>
        </div>
        <div class="mt-8 text-center">
            <button class="mr-3 bg-gray-200 border border-gray-300 py-3 px-4 rounded hover:bg-gray-400 hover:border-gray-500">Google Search</button>
            <button class="bg-gray-200 border border-gray-300 py-3 px-4 rounded hover:bg-gray-400 hover:border-gray-500">I'm Feeling Lucky</button>
        </div>
    </div>
</div>

<div class="fixed bottom-0 bg-gray-200 border-t w-full flex justify-between text-gray-600 text-xs">
    <div class="flex">
        <a class="block p-3">Advertising</a>
        <a class="block p-3">Business</a>
        <a class="block p-3">How Search Works</a>
    </div>
    <div class="flex">
        <a class="block p-3">Privacy</a>
        <a class="block p-3">Terms</a>
        <a class="block p-3">Settings</a>
    </div>
</div>

Related Examples

Clone of Google’s Search Functionality
This Tailwind CSS example, contributed by Bishnu Thapa on April 4th, 2024, showcases a responsive component designed using version 3.4 of Tailwind CSS. It is responsive.

Bishnu Thapa

2 years ago

3.7k
Simple dialpad

Brandon D

3 years ago

11.9k
GitHub For you Feed
GitHub For you Feed Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.8k
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.8k
Linkedin Post

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.4k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Nomusa Botha

2 years ago

2.6k
Facebook Login page
Facebook Login page

Rehman Arshad

2 years ago

3.7k
Trending Users
Tailwind Flex Trending Users Card Design

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.6k
mailer
gmail style

МОЙДОЫР

10 months ago

772
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
Twitter tweet clone
Replica of twitter tweet card

Sophia Baker

3 years ago

10.4k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.1k