Published on

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

Google Chrome clone

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Google Chrome clone ui component

twitter.com/ahmedash95

Why use Tailwind CSS to build a Google Chrome clone ui component?

  • It can make the building process of Google Chrome clone ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Google Chrome clone component file.

The preview of Google Chrome clone ui component

Free download of the Google Chrome clone's source code

The source code of Google Chrome clone ui component

<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 build a Google Chrome clone with Tailwind CSS?

Install tailwind css of verion 1.0.4

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.0.4

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to build a Google Chrome clone component

  • overflow-hidden
  • bg-white
  • min-h-64
  • h-3
  • bg-gray-900
  • w-full
  • h-6
  • flex
  • pt-2
  • pr-4
  • ml-2
  • text-center
  • border-red-900
  • bg-red-500
  • w-2
  • h-2
  • border-yellow-900
  • bg-yellow-500
  • border-green-900
  • bg-green-500
  • pt-1
  • z-10
  • flex-grow
  • text-xs
  • w-48
  • w-4
  • h-4
  • px-2
  • mr-2
  • text-gray-500
  • bg-gray-800
  • text-gray-300
  • flex-start
  • border-l
  • border-gray-500
  • pl-2
  • h-8
  • -mt-2
  • z-0
  • flex-none
  • h-5
  • relative
  • absolute
  • w-3
  • mt-1
  • ml-1
  • w-64
  • text-white
  • pl-6
  • px-1
  • mx-2
  • my-1
  • h-64
  • flex-col

54 steps to build a Google Chrome clone component with Tailwind CSS

  1. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  2. Control the background color of an element to white using the bg-white utilities.

  3. Set the minimum width/height of an element using the min-h-64 utilities.

  4. Use h-3 to set an element to a fixed height(0.75rem).

  5. Control the background color of an element to gray-900 using the bg-gray-900 utilities.

  6. Use w-full to set an element to a 100% based width.

  7. Use h-6 to set an element to a fixed height(1.5rem).

  8. Use flex to create a block-level flex container.

  9. Control the padding on top side of an element to 0.5rem using the pt-2 utilities.

  10. Control the padding on right side of an element to 1rem using the pr-4 utilities.

  11. Control the margin on left side of an element to 0.5rem using the ml-2 utilities.

  12. Control the text color of an element to center using the text-center utilities.

  13. Control the border color of an element to red-900 using the border-red-900 utilities.

  14. Control the background color of an element to red-500 using the bg-red-500 utilities.

  15. Use w-2 to set an element to a fixed width(0.5rem).

  16. Use h-2 to set an element to a fixed height(0.5rem).

  17. Control the border color of an element to yellow-900 using the border-yellow-900 utilities.

  18. Control the background color of an element to yellow-500 using the bg-yellow-500 utilities.

  19. Control the border color of an element to green-900 using the border-green-900 utilities.

  20. Control the background color of an element to green-500 using the bg-green-500 utilities.

  21. Control the padding on top side of an element to 0.25rem using the pt-1 utilities.

  22. Control the stack order (or three-dimensional positioning) of an element to 10 in Tailwind, regardless of order it has been displayed, using the z-10 utilities.

  23. Use flex to create a block-level flex container.

  24. Control the text color of an element to xs using the text-xs utilities.

  25. Use w-48 to set an element to a fixed width(12rem).

  26. Use w-4 to set an element to a fixed width(1rem).

  27. Use h-4 to set an element to a fixed height(1rem).

  28. Control the horizontal padding of an element to 0.5rem using the px-2 utilities.

  29. Control the margin on right side of an element to 0.5rem using the mr-2 utilities.

  30. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  31. Control the background color of an element to gray-800 using the bg-gray-800 utilities.

  32. Control the text color of an element to gray-300 using the text-gray-300 utilities.

  33. Use flex to create a block-level flex container.

  34. Control the border color of an element to l using the border-l utilities.

  35. Control the border color of an element to gray-500 using the border-gray-500 utilities.

  36. Adjust the left padding of the element to 0.5rem using the pl-2 utilities class

  37. Use h-8 to set an element to a fixed height(2rem).

  38. Control the margin on top side of an element to -0.5rem using the -mt-2 utilities.

  39. Control the stack order (or three-dimensional positioning) of an element to 0 in Tailwind, regardless of order it has been displayed, using the z-0 utilities.

  40. Use flex to create a block-level flex container.

  41. Use h-5 to set an element to a fixed height(1.25rem).

  42. Use relative to position an element according to the normal flow of the document.

  43. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  44. Use w-3 to set an element to a fixed width(0.75rem).

  45. Control the margin on top side of an element to 0.25rem using the mt-1 utilities.

  46. Control the margin on left side of an element to 0.25rem using the ml-1 utilities.

  47. Use w-64 to set an element to a fixed width(16rem).

  48. Control the text color of an element to white using the text-white utilities.

  49. Adjust the left padding of the element to 1.5rem using the pl-6 utilities class

  50. Control the horizontal padding of an element to 0.25rem using the px-1 utilities.

  51. Control the horizontal margin of an element to 0.5rem using the mx-2 utilities.

  52. Control the vertical margin of an element to 0.25rem using the my-1 utilities.

  53. Use h-64 to set an element to a fixed height(16rem).

  54. Use flex to create a block-level flex container.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to build a Google Chrome clone components, learn and follow along to implement your own components.