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.

This tailwind example is contributed by Bishnu Thapa, on 15-Apr-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are find,copy

Search Bar Clone

Author Bishnu Thapa

Tailwind v3.4 3.7k 5

Fork Fullscreen

<div class=" bg-slate-800 w-screen full-height">

<div class="flex justify-between text-slate-50 p-4">
  <div class="flex gap-5 pt-2">
    <p>About</p>
     <p>Store</p>
  </div>
  <div class="flex gap-5">
     <p class="pt-2">Gmail</p>
     <p class="pt-2">Images</p>
     <div class="w-10 h-10 hover:bg-slate-600 hover:shadow-sm rounded-full">
      <img class="w-10 h-10 p-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Google_Labs_Icon_%282023%29.svg/1200px-Google_Labs_Icon_%282023%29.svg.png" />
     </div>
      <div class="w-10 h-10 hover:bg-slate-600 hover:shadow-sm rounded-full">
      <img class="w-10 h-10 p-2 rounded-full border" src="https://randomuser.me/api/portraits/women/56.jpg" />
     </div>
  </div>
</div>

<div class="container mx-auto mt-14 flex justify-center">
  <div>
    <img class="w-2/6 flex justify-center mx-auto" src="https://white.logodownload.org/wp-content/uploads/2020/11/google-white-logo.png" />
  <div class="w-3/4 border hover:bg-slate-600 border-slate-500 rounded-full h-12 mx-auto mt-10 hover:border-none flex justify-between">
    <p class="p-3 text-slate-200">
       <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 ml-3 text-gray-400 hover:text-gray-500"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
      />
    </svg>
    </p>
    <input class="w-4/5 bg-transparent text-slate-200 placeholder:text-2xl focus:border-none focus:outline-none" type="search" placeholder="" />
    <p class="p-3 text-slate-200">
      <img class="w-4 " src="https://seeklogo.com/images/G/google-mic-logo-EF440C9A6F-seeklogo.com.png" alt="google voice"/>
    </p>
    <p class="p-3 text-slate-200">
      <img class="w-6" src="https://freshlookapp.com/wp-content/uploads/2020/04/Google-Lens-What-it-is-How-to-install-it-Everything-you-can-do-with-it.png" alt="google voice"/>
    </p>
  </div>
  <div class="w-1/2 mx-auto mt-7 flex justify-center gap-6 ">
      <button class="bg-slate-700 rounded-md w-auto py-3 h-auto px-3 h-10 shadow-sm text-slate-300">Google Search</button>
      <button class="bg-slate-700 rounded-md w-auto px-3 py-3 h-auto h-10 shadow-sm text-slate-300">I'm Feeling Lucky</button>
  </div>

<div class="bg-slate-900 lg:mb-6 mx-auto w-auto h-auto md:w-2/5 lg:w-2/5 mt-12 flex justify-center rounded-full">
  <div class="p-5 lg:p-2 w-auto h-auto text-center mb-4"><p class="text-slate-200 text-xl">Try AI-powered overviews when you search</p>
</dv>
  </div>
  </div>
  
  <footer class="bg-slate-900 mt-12 md:p-3 text-slate-200 p-2 w-screen h-14 flex justify-center lg:justify-between">
    <div class="lg:flex flex-row gap-3  hidden">
      <p>Advertising</p>
      <p>Business</p>
      <p>How Search works</p>
    </div>
     <div>🥬 Our third decade of climate action: join us</div>
      <div class="lg:flex flex-row gap-3  hidden">
      <p>Privacy</p>
      <p>Terms</p>
      <p>Settings</p>
    </div>
  </footer>
</div>
</div>