Published on

6 Easy Ways To Create A Google Chrome Clone With Tailwind CSS Without Even Thinking About It

Tags
NavigationsPagesWidget

Google Chrome clone

If you are a front-end developer, you might have heard of Tailwind CSS. It is a utility-first CSS framework that allows you to create custom designs without writing any CSS. In this article, we will show you how to create a Google Chrome clone UI component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides you with a set of pre-defined CSS classes that you can use to create custom designs. It is different from other CSS frameworks like Bootstrap and Foundation, which provide you with pre-designed components.

With Tailwind CSS, you can create custom designs without writing any CSS. You can use its pre-defined classes to create custom styles for your HTML elements.

The description of Google Chrome clone UI component

Before we dive into creating a Google Chrome clone UI component, let's take a look at what it looks like. The Google Chrome clone UI component consists of a header, a search bar, and a list of tabs.

The header contains the Google Chrome logo, a menu button, and a user profile icon. The search bar allows you to search for websites, and the list of tabs shows you the websites that you have opened.

Why use Tailwind CSS to create a Google Chrome clone UI component?

Tailwind CSS is a great choice for creating a Google Chrome clone UI component because it allows you to create custom designs without writing any CSS. It provides you with a set of pre-defined classes that you can use to create custom styles for your HTML elements.

Using Tailwind CSS, you can create a Google Chrome clone UI component quickly and easily. You don't have to spend hours writing CSS code to create custom styles for your HTML elements.

The preview of Google Chrome clone UI component

To give you an idea of what the Google Chrome clone UI component looks like, here is a preview:

Free download of the Google Chrome clone's source code

The source code of Google Chrome clone UI component

To create the Google Chrome clone UI component, we will be using HTML and Tailwind CSS. Here is the source code:

<div class="rounded-lg overflow-hidden shadow-lg bg-white min-h-64">
  <div class="h-3 bg-gray-900 w-full h-6 flex">
    <!-- Window Actions -->
    <div class="flex pt-2 pr-4 bg-gray-900 h-6">
      <div class="flex ml-2 items-center text-center border-red-900 bg-red-500 shadow-inner rounded-full w-2 h-2"></div>
      <div class="ml-2 border-yellow-900 bg-yellow-500 shadow-inner rounded-full w-2 h-2"></div>
      <div class="ml-2 border-green-900 bg-green-500 shadow-inner rounded-full w-2 h-2"></div>
    </div>
    <!-- Tabs -->
    <div id="tabs" class="flex pt-1 z-10 flex-grow">
      <div class="text-xs w-48 flex justify-between bg-gray-900 rounded-r-lg">
        <p>
          <svg class="w-4 h-4" viewBox="0 0 50 52" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M49.626 11.564C49.6444 11.6321 49.6538 11.7024 49.654 11.773V22.745C49.654 22.8858 49.6168 23.0241 49.5462 23.146C49.4757 23.2679 49.3742 23.3689 49.252 23.439L40.043 28.741V39.25C40.043 39.536 39.891 39.8 39.643 39.944L20.42 51.01C20.376 51.035 20.328 51.051 20.28 51.068C20.262 51.074 20.245 51.085 20.226 51.09C20.0916 51.1254 19.9504 51.1254 19.816 51.09C19.794 51.084 19.774 51.072 19.753 51.064C19.709 51.048 19.663 51.034 19.621 51.01L0.402 39.944C0.279907 39.8739 0.178461 39.7728 0.107885 39.6509C0.0373084 39.5291 9.67394e-05 39.3908 0 39.25L0 6.33399C0 6.26199 0.01 6.19199 0.028 6.12399C0.034 6.10099 0.048 6.07999 0.056 6.05699C0.071 6.01499 0.085 5.97199 0.107 5.93299C0.122 5.90699 0.144 5.88599 0.162 5.86199C0.185 5.82999 0.206 5.79699 0.233 5.76899C0.256 5.74599 0.286 5.72899 0.312 5.70899C0.341 5.68499 0.367 5.65899 0.4 5.63999H0.401L10.011 0.106993C10.1327 0.0369738 10.2706 0.00012207 10.411 0.00012207C10.5514 0.00012207 10.6893 0.0369738 10.811 0.106993L20.421 5.63999H20.423C20.455 5.65999 20.482 5.68499 20.511 5.70799C20.537 5.72799 20.566 5.74599 20.589 5.76799C20.617 5.79699 20.637 5.82999 20.661 5.86199C20.678 5.88599 20.701 5.90699 20.715 5.93299C20.738 5.97299 20.751 6.01499 20.767 6.05699C20.775 6.07999 20.789 6.10099 20.795 6.12499C20.8134 6.19314 20.8228 6.2634 20.823 6.33399V26.893L28.831 22.282V11.772C28.831 11.702 28.841 11.631 28.859 11.564C28.866 11.54 28.879 11.519 28.887 11.496C28.903 11.454 28.917 11.411 28.939 11.372C28.954 11.346 28.976 11.325 28.993 11.301C29.017 11.269 29.037 11.236 29.065 11.208C29.088 11.185 29.117 11.168 29.143 11.148C29.173 11.124 29.199 11.098 29.231 11.079H29.232L38.843 5.54599C38.9646 5.47588 39.1026 5.43897 39.243 5.43897C39.3834 5.43897 39.5214 5.47588 39.643 5.54599L49.253 11.079C49.287 11.099 49.313 11.124 49.343 11.147C49.368 11.167 49.397 11.185 49.42 11.207C49.448 11.236 49.468 11.269 49.492 11.301C49.51 11.325 49.532 11.346 49.546 11.372C49.569 11.411 49.582 11.454 49.598 11.496C49.607 11.519 49.62 11.54 49.626 11.564V11.564ZM48.052 22.282V13.158L44.689 15.094L40.043 17.769V26.893L48.053 22.282H48.052ZM38.442 38.787V29.657L33.872 32.267L20.822 39.715V48.931L38.442 38.787ZM1.602 7.71899V38.787L19.22 48.93V39.716L10.016 34.507L10.013 34.505L10.009 34.503C9.978 34.485 9.952 34.459 9.923 34.437C9.898 34.417 9.869 34.401 9.847 34.379L9.845 34.376C9.819 34.351 9.801 34.32 9.779 34.292C9.759 34.265 9.735 34.242 9.719 34.214L9.718 34.211C9.7 34.181 9.689 34.145 9.676 34.111C9.663 34.081 9.646 34.053 9.638 34.021V34.02C9.628 33.982 9.626 33.942 9.622 33.903C9.618 33.873 9.61 33.843 9.61 33.813V33.811V12.33L4.965 9.65399L1.602 7.71999V7.71899ZM10.412 1.72499L2.405 6.33399L10.41 10.943L18.416 6.33299L10.41 1.72499H10.412ZM14.576 30.489L19.221 27.815V7.71899L15.858 9.65499L11.212 12.33V32.426L14.576 30.489ZM39.243 7.16399L31.237 11.773L39.243 16.382L47.248 11.772L39.243 7.16399V7.16399ZM38.442 17.769L33.796 15.094L30.433 13.158V22.282L35.078 24.956L38.442 26.893V17.769ZM20.02 38.33L31.763 31.626L37.633 28.276L29.633 23.67L20.422 28.973L12.027 33.806L20.02 38.33V38.33Z"
                  fill="#FF2D20" />
          </svg>
        </p>
        <p class="px-2 whitespace-no-wrap overflow-x-hidden mr-2 text-gray-500 font-thin">Laravel - The PHP Framework For Web Artisans</p>
        <p>
          <svg class="w-4 h-4" viewBox="0 -5 30 30" fill="none">
            <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="white" fill-opacity="0.54" />
          </svg>
        </p>
      </div>
      <div class="text-xs w-48 flex justify-between bg-gray-800 rounded-t-lg">
        <p>
          <svg class="w-4 h-4" viewBox="0 0 50 52" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill="url(#paint0_linear)" fill-rule="evenodd" clip-rule="evenodd"
                  d="M32 16C24.8 16 20.3 19.6 18.5 26.8C21.2 23.2 24.35 21.85 27.95 22.75C30.004 23.2635 31.4721 24.7536 33.0971 26.4031C35.7443 29.0901 38.8081 32.2 45.5 32.2C52.7 32.2 57.2 28.6 59 21.4C56.3 25 53.15 26.35 49.55 25.45C47.496 24.9365 46.0279 23.4464 44.4029 21.7969C41.7557 19.1099 38.6919 16 32 16ZM18.5 32.2C11.3 32.2 6.8 35.8 5 43C7.7 39.4 10.85 38.05 14.45 38.95C16.504 39.4635 17.9721 40.9536 19.5971 42.6031C22.2443 45.2901 25.3081 48.4 32 48.4C39.2 48.4 43.7 44.8 45.5 37.6C42.8 41.2 39.65 42.55 36.05 41.65C33.996 41.1365 32.5279 39.6464 30.9029 37.9969C28.2557 35.3099 25.1919 32.2 18.5 32.2Z">
            </path>
            <defs>
              <linearGradient id="paint0_linear" x1="3.5" y1="16" x2="59" y2="48" gradientUnits="userSpaceOnUse">
                <stop stop-color="#2298BD"></stop>
                <stop offset="1" stop-color="#0ED7B5"></stop>


              </linearGradient>
            </defs>
          </svg>
        </p>
        <p class="px-2 whitespace-no-wrap overflow-x-hidden mr-2 text-gray-300">Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs</p>
        <p>
          <svg class="w-4 h-4" viewBox="0 -5 30 30" fill="none">
            <path
                  d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
                  fill="white" fill-opacity="0.54" />
          </svg>
        </p>
      </div>
      <div class="text-xs w-48 flex justify-between bg-gray-900 rounded-l-lg">
        <div class="flex flex-start ml-2">
          <p>
            <svg class="w-4 h-4" viewBox="0 0 200 150" fill="none">
              xmlns:xlink="http://www.w3.org/1999/xlink">
              <rect width="180" height="180" fill="url(#pattern0)" />
              <defs>
                <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                  <use xlink:href="#image0" transform="scale(0.00555556)" />
                </pattern>
                <image id="image0" width="180" height="180"
                       xlink:href="data:image/png;base64,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" />
              </defs>
            </svg>
          </p>
          <p class="px-2 whitespace-no-wrap overflow-x-hidden mr-2  text-gray-500 font-thin">ahmedash.com</p>
        </div>
        <p>
          <svg class="w-4 h-4" viewBox="0 -5 30 30" fill="none">
            <path
                  d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
                  fill="white" fill-opacity="0.54" />
          </svg>
        </p>
      </div>
      <div class="text-xs w-48 flex justify-between bg-gray-900 flex-grow">
        <div class="border-l border-gray-500 pl-2 h-4">
          <svg class="w-4 h-4" viewBox="0 -5 30 30" fill="none">
            <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="white" fill-opacity="0.94" />
          </svg>
        </div>
      </div>
    </div>
  </div>
  <!-- Address bar -->
  <div class="bg-gray-800 flex justify-between w-full pt-2 h-8 flex -mt-2 z-0">
    <!-- Actions -->
    <div id="actions" class="flex px-2 flex-none">
      <div id="back">
        <svg class="w-4 h-5" viewBox="0 0 20 20" fill="none">
          <path d="M21 11H6.83L10.41 7.41L9 6L3 12L9 18L10.41 16.59L6.83 13H21V11Z" fill="white" fill-opacity="0.2" />
        </svg>
      </div>
      <div id="forward" class="ml-2">
        <svg class="w-4 h-5" viewBox="0 0 20 20" fill="none">
          <path d="M3 13L17.17 13L13.59 16.59L15 18L21 12L15 6L13.59 7.41L17.17 11L3 11L3 13Z" fill="white" fill-opacity="0.2" />
        </svg>
      </div>
      <div id="reload" class="ml-2">
        <svg class="w-4 h-5" viewBox="0 0 20 20" fill="none">
          <path
                d="M17.65 6.35C16.2 4.9 14.21 4 12 4C7.58001 4 4.01001 7.58 4.01001 12C4.01001 16.42 7.58001 20 12 20C15.73 20 18.84 17.45 19.73 14H17.65C16.83 16.33 14.61 18 12 18C8.69001 18 6.00001 15.31 6.00001 12C6.00001 8.69 8.69001 6 12 6C13.66 6 15.14 6.69 16.22 7.78L13 11H20V4L17.65 6.35Z"
                fill="white" fill-opacity="0.54" />
        </svg>
      </div>
      <div id="home" class="ml-2">
        <svg class="w-4 h-5" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10 20V14H14V20H19V12H22L12 3L2 12H5V20H10Z" fill="white" fill-opacity="0.8" />
        </svg>
      </div>
    </div>
    <!-- URL -->
    <div class="flex-grow relative">
      <svg class="absolute w-3 h-3 z-10 mt-1 ml-1" viewBox="0 -5 15 25" fill="currentColor">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M18 8H17V6C17 3.23999 14.76 1 12 1C9.23999 1 7 3.23999 7 6V8H6C4.90002 8 4 8.89999 4 10V20C4 21.1 4.90002 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.89999 19.1 8 18 8ZM12 17C10.9 17 10 16.1 10 15C10 13.9 10.9 13 12 13C13.1 13 14 13.9 14 15C14 16.1 13.1 17 12 17ZM9 6V8H15V6C15 4.34 13.66 3 12 3C10.34 3 9 4.34 9 6Z" fill="white" />
      </svg>
      <input type="text" class="w-full rounded-full w-64 h-4 mt-1 bg-gray-900 text-white pl-6 px-1 text-xs" value="tailwindcss.com">
    </div>
    <!-- Extensions -->
    <div class="flex flex-none mx-2">
      <div id="google-translate">
        <svg class="w-4 h-5" viewBox="0 -9 15 30" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M12.45 16H14.5399L9.42993 3H7.56995L2.45996 16H4.54993L5.66992 13H11.3099L12.45 16ZM6.42993 11L8.49988 5.47998L10.5699 11H6.42993ZM13.4999 19.6801L21.59 11.59L22.9999 13L13.5099 22.5L8.41992 17.41L9.82996 16L13.4999 19.6801Z"
                fill="white" fill-opacity="0.84" />
        </svg>
      </div>
      <div id="web-proxy">
        <svg class="w-4 h-5" viewBox="0 -9 15 30" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M4.21997 3.21997C6.20996 1.22998 8.95996 0 12 0C15.0399 0 17.7899 1.22998 19.77 3.22998L18.36 4.64001C16.74 3.01001 14.49 2 12 2C9.51001 2 7.26001 3.01001 5.63 4.63L4.21997 3.21997ZM7.04993 6.04999L8.45996 7.46002C9.36987 6.56 10.6199 6 11.9999 6C13.3799 6 14.6299 6.56 15.5399 7.46002L16.95 6.04999C15.6799 4.78003 13.9299 4 11.9999 4C10.0699 4 8.31995 4.78003 7.04993 6.04999ZM8 10C8 9.45001 8.44995 9 9 9H15C15.55 9 16 9.45001 16 10V22C16 22.55 15.55 23 15 23H9C8.44995 23 8 22.55 8 22V10ZM10 13C10 14.1 10.9 15 12 15C13.1 15 14 14.1 14 13C14 11.9 13.1 11 12 11C10.9 11 10 11.9 10 13Z"
                fill="white" fill-opacity="0.84" />
        </svg>
      </div>
      <div id="xdebug">
        <svg class="w-4 h-5" viewBox="0 -9 15 30" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M20 8H17.1899C16.74 7.22 16.12 6.55 15.37 6.04L17 4.41L15.59 3L13.42 5.17C12.96 5.06 12.49 5 12 5C11.51 5 11.04 5.06 10.59 5.17L8.41003 3L7 4.41L8.62 6.04C7.88 6.55 7.26001 7.22 6.81006 8H4V10H6.08997C6.04004 10.33 6 10.66 6 11V12H4V14H6V15C6 15.34 6.04004 15.67 6.08997 16H4V18H6.81006C7.84998 19.79 9.78003 21 12 21C14.22 21 16.15 19.79 17.1899 18H20V16H17.91C17.96 15.67 18 15.34 18 15V14H20V12H18V11C18 10.66 17.96 10.33 17.91 10H20V8ZM14 16H10V14H14V16ZM10 12H14V10H10V12Z"
                fill="white" fill-opacity="0.84" />
        </svg>
      </div>
    </div>
    <!-- Profile and settings -->
    <div class="flex flex-none mx-2">
      <div class="border-l border-gray-500 my-1 pl-2"></div>
      <img class="w-4 h-4 mt-1 rounded-full" src="https://images.unsplash.com/photo-1489481039754-8701aeda983b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=50&h=50&q=80">
      <div id="settings">
        <svg class="w-4 h-5" viewBox="0 -6 15 30" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.1001 8 14 7.1 14 6C14 4.9 13.1001 4 12 4C10.8999 4 10 4.9 10 6C10 7.1 10.8999 8 12 8ZM12 10C10.8999 10 10 10.9 10 12C10 13.1 10.8999 14 12 14C13.1001 14 14 13.1 14 12C14 10.9 13.1001 10 12 10ZM10 18C10 16.9 10.8999 16 12 16C13.1001 16 14 16.9 14 18C14 19.1 13.1001 20 12 20C10.8999 20 10 19.1 10 18Z" 
                                                                     fill="white" />
        </svg>
      </div>
    </div>
  </div>
  <div class="bg-white h-64 flex justify-center flex-col items-center">
    <h1>Welcome to TailwindCSS</h1>
  </div>
</div>

How to create a Google Chrome clone with Tailwind CSS?

Now that you have seen what the Google Chrome clone UI component looks like and have the source code, let's dive into how to create it.

Step 1: Set up your HTML file

To get started, create an HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Google Chrome Clone</title>
  </head>
  <body>
    <!-- Your HTML code goes here -->
  </body>
</html>

Step 2: Add the header

Next, let's add the header. The header contains the Google Chrome logo, a menu button, and a user profile icon. Here is the code:

<header class="bg-gray-700 text-white flex justify-between items-center p-4">
  <div class="flex items-center">
    <img src="https://www.google.com/chrome/static/images/chrome-logo.svg" alt="Google Chrome Logo" class="h-8 mr-2" />
    <h1 class="text-lg font-bold">Google Chrome</h1>
  </div>
  <div class="flex items-center">
    <button class="bg-gray-600 hover:bg-gray-800 rounded-full p-2 mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 fill-current">
        <path
          fill-rule="evenodd"
          d="M3 18a3 3 0 003 3h12a3 3 0 003-3V6a3 3 0 00-3-3H6a3 3 0 00-3 3v12zm3 1v-2h12v2H6zm0-3V8h12v8H6z"
          clip-rule="evenodd"
        />
      </svg>
    </button>
    <img src="https://via.placeholder.com/32" alt="User Profile" class="h-8 w-8 rounded-full" />
  </div>
</header>

Next, let's add the search bar. The search bar allows you to search for websites. Here is the code:

<div class="bg-gray-200 p-4">
  <div class="bg-white rounded-full flex items-center px-4 py-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 fill-current text-gray-500 mr-2">
      <path
        fill-rule="evenodd"
        d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 111.06-1.06l.27.28v.79l4.25 4.24a1 1 0 01-1.42 1.42l-4.24-4.25v-.79l.28.27a6.5 6.5 0 11-1.06 1.06l-.27-.28v-.79l-4.25-4.24a1 1 0 011.42-1.42l4.24 4.25v.79l-.28-.27a6.5 6.5 0 111.06-1.06l.27.28L15.5 14zm-6 0a4.5 4.5 0 109 0 4.5 4.5 0 00-9 0z"
        clip-rule="evenodd"
      />
    </svg>
    <input type="text" placeholder="Search Google or type a URL" class="w-full outline-none" />
  </div>
</div>

Step 4: Add the tabs

Finally, let's add the tabs. The tabs show you the websites that you have opened. Here is the code:

<div class="bg-gray-100 p-4">
  <div class="flex items-center">
    <button class="bg-gray-300 rounded-full p-2 mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 fill-current text-gray-500">
        <path
          fill-rule="evenodd"
          d="M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm3 0v12h12V6H6zm3 3v6h6V9H9z"
          clip-rule="evenodd"
        />
      </svg>
    </button>
    <div class="flex-1 overflow-x-auto whitespace-no-wrap">
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">Google</a>
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">Facebook</a>
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">Twitter</a>
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">LinkedIn</a>
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">GitHub</a>
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">Stack Overflow</a>
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">Medium</a>
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">YouTube</a>
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">Reddit</a>
      <a href="#" class="inline-block bg-white rounded-full px-4 py-2 mr-2 shadow">Product Hunt</a>
    </div>
  </div>
</div>

Step 5: Add Tailwind CSS

Finally, let's add Tailwind CSS to our HTML file. You can do this by adding the following code to the head of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" />

Step 6: Preview your Google Chrome clone

Now that you have added all the code, you can preview your Google Chrome clone by opening the HTML file in your web browser.

Conclusion

In this article, we showed you how to create a Google Chrome clone UI component using Tailwind CSS. We hope that this tutorial has helped you understand how to use Tailwind CSS to create custom designs without writing any CSS. With Tailwind CSS, you can create custom designs quickly and easily, making it a great choice for front-end developers.