JSFiddle - React, Tailwind, and code Playground

by Magayaga

HTML

<html>
 <head>
  <title>
   Google
  </title>
  <script src="https://cdn.tailwindcss.com">
  </script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
 </head>
 <body class="flex flex-col items-center justify-center h-screen bg-white">
  <img alt="Google logo with blue, red, yellow, and green colors" class="mb-8" height="92" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" width="272"/>
  <div class="flex items-center w-full max-w-xl p-2 border rounded-full shadow-md">
   <i class="fas fa-search text-gray-500 ml-3">
   </i>
   <input class="flex-grow px-4 py-2 text-lg focus:outline-none" placeholder="Search Google or type a URL" type="text"/>
   <i class="fas fa-microphone text-blue-500 mr-3">
   </i>
   <i class="fas fa-camera text-blue-500 mr-3">
   </i>
  </div>
  <div class="flex space-x-4 mt-8">
   <button class="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200">
    Google Search
   </button>
   <button class="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200">
    I'm Feeling Lucky
   </button>
  </div>
  <div class="mt-6 text-sm text-gray-700">
   Google offered in:
   <a class="text-blue-700 hover:underline" href="#">
    Filipino
   </a>
   <a class="text-blue-700 hover:underline" href="#">
    Cebuano
   </a>
  </div>
 </body>
</html>