Published on

Surprisingly Effective Ways To Build A Google Translate Clone Template With Tailwind CSS

Tags
AlpinejsInputsPages
Google Translate Clone Template

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 Translate Clone Template ui component

Included alpine.js, translate.js, tostify.js also see on codepen.io/egoistdeveloper/pen/exbxwkj

Why use Tailwind CSS to make a Google Translate Clone Template ui component?

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

The preview of Google Translate Clone Template ui component

Free download of the Google Translate Clone Template's source code

The source code of Google Translate Clone Template ui component

<!-- MDI Icons -->
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css" />

<!-- toastify.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastify-js/1.11.2/toastify.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastify-js/1.11.2/toastify.min.js"></script>

<!-- AlpineJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.8.1/cdn.min.js" defer></script>

<!-- translate.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/translate.min.js"></script>

<!-- clipboard.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>

<style>
	header i,
	header i::before {
		font-size: 24px !important;
		height: 20px !important;
	}

	/* apps popup container */
	.apps-container {
		width: 310px;
		z-index: 1000;
	}

	/* apps container scrollbar */
	.custom-scrollbar::-webkit-scrollbar {
		width: 7px;
		background-color: #f5f5f5;
		margin-right: 5px;
	}

	.custom-scrollbar::-webkit-scrollbar:horizontal {
		height: 7px;
		background-color: #f5f5f5;
	}

	.custom-scrollbar::-webkit-scrollbar-track {
		/* box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); */
		background-color: #fff;
		border-radius: 7px;
	}

	.custom-scrollbar::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background-color: #e8e8e8;
		margin-right: 5px;
	}

	/* alpinejs */
	[x-cloak] {
		display: none !important;
	}

	.mdi-32px::before {
		font-size: 30px;
	}
</style>

<!-- Page Container -->
<div class="relative bg-white" x-cloak
	x-data="{ appsPopupIsActive: false, appsIsOpen: false, sourceText: 'No problem is too small or too trivial if we can really do something about it.\n\nRichard Feynman', translatedText: 'Translation' }"
	x-init="translatedText = await translation(sourceText); appInit();">
	<!-- Header Container -->
	<div class="flex">
		<header class="flex flex-grow px-5 py-2 border-b border-gray-200">
			<!-- Menu and Logo -->
			<div class="flex-none">
				<div class="flex flex-grow mt-1">
					<button class="hover:bg-gray-100 rounded-full w-9 h-9 mr-2 
              transition-colors duration-100">
              <i class="mdi mdi-menu text-gray-500"></i>
            </button>

					<a href="https://translate.google.com.tr">
						<img src="https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg" alt="Logo"
                class="mt-2" />
            </a>

						<div class="ml-2 my-auto text-lg font-medium text-gray-500">
							Translate
						</div>
				</div>
			</div>

			<!-- Middle Space -->
			<div class="flex-grow"></div>

			<!-- Apps and Avatar -->
			<div class="flex-none">
				<!-- Buttons -->
				<div class="flex">
					<button class="hover:bg-gray-100 rounded-full 
              w-9 h-9 mt-1 mr-2
              transition-colors duration-100" x-on:click="appsIsOpen = !appsIsOpen; appsPopupIsActive = appsIsOpen">
              <i class="mdi mdi-apps text-gray-500"></i>
            </button>

					<button class="m-1">
              <img src="https://avatars0.githubusercontent.com/u/17010054?v=4" alt="Avatar"
                class="object-cover w-9 h-9 rounded-full border shado" />
            </button>
				</div>

				<!-- Apps Container -->
				<div class="apps-container flex flex-wrap absolute bg-white shadow-md 
              right-5 top-18 px-4 py-2 rounded-md border h-96 
              overflow-x-hidden overflow-y-scroll custom-scrollbar" x-show="appsIsOpen"
					x-on:mouseleave="setTimeout(() => { appsIsOpen = appsPopupIsActive ? false : true }, 1000)"
					x-on:mouseenter="appsPopupIsActive = true">
					<template x-for="(app, index) in apps">
						<!-- App -->
						<div class="container h-20 w-20 mx-1 my-2 
                hover:bg-blue-100 hover:cursor-pointer 
                rounded-md transition-all duration-50" :title="app.name">
							<!-- Icon -->
							<img :src="app.icon" :alt="app.name" class="h-10 mx-auto mt-4" />

							<!-- Name -->
							<div class="text-sm text-center text-gray-700 select-none" x-text="app.name"></div>
						</div>
					</template>

					<button class="border border-blue-200 text-center text-blue-600
              hover:bg-blue-50/50 hover:text-blue-700
              mx-auto px-3 py-1 mb-4 mt-10 rounded
              transition-all duration-50">
              More from Google
            </button>
				</div>
			</div>
		</header>
	</div>

	<!-- Translator -->
	<div class="before:content-[''] before:bg-gray-50 
        before:h-24 before:w-full before:absolute
        before:border-b before:border-gray-200
        before:z-0 z-10">
		<div class="container mx-auto px-0 lg:px-24">
			<!-- Translation Source Buttons -->
			<div class="flex">
				<div class="py-4 z-10">
					<!-- Active Button -->
					<button class="rounded px-3 py-1 bg-blue-100
            border border-blue-200 text-base text-blue-700 font-semibold
            focus:outline-none focus:ring-1 focus:ring-blue-600">
              <i class="mdi mdi-translate"></i>

              Text
            </button>

					<!-- Normal Button -->
					<button class="rounded px-3 py-1 ml-1
            border border-blue-200 text-base text-blue-600 
            focus:outline-none focus:ring-1 focus:ring-blue-600">
              <i class="mdi mdi-file"></i>

              Dcoument
            </button>
				</div>
			</div>

			<div class="flex flex-row">
				<div class="pb-4 top-32 h z-10 w-full">
					<!-- Translator Container -->
					<div class="bg-white rounded-lg border border-gray-200
              drop-shadow-sm shadow-sm">
						<!-- Language Bar -->
						<div class="flex border-b border-gray-300">
							<!-- From Languages -->
							<div class="w-7/12">
								<nav class="flex flex-row rounded-tl-lg">
									<!-- Detect Language -->
									<button class="uppercase py-3.5 px-3
                      text-gray-600 font-semibold 
                      text-xs lg:text-sm
                      rounded-tl-lg
                      hover:bg-gray-50 hover:text-gray-700
                      transition-colors duration-100">
                      Detect Language
                    </button>

									<!-- Lang: Turkish -->
									<button class="uppercase py-3.5 px-3
                      text-gray-600 font-semibold 
                      text-xs lg:text-sm
                      hover:bg-gray-50 hover:text-gray-700
                      transition-colors duration-100">
                      Turkish
                    </button>

									<!-- Lang: English -->
									<button class="uppercase py-3.5 px-3
                      text-gray-600 font-semibold 
                      text-xs lg:text-sm
                      hover:bg-gray-50 hover:text-gray-700
                      transition-colors duration-100
                      text-blue-500 hover:text-blue-600
                      border-b-2 border-blue-500 ">
                      English
                    </button>

									<!-- Lang: Turkish -->
									<button class="uppercase py-3.5 px-3
                      text-gray-600 font-semibold 
                      text-xs lg:text-sm
                      hover:bg-gray-50 hover:text-gray-700
                      transition-colors duration-100">
                      Japanese
                    </button>

									<!-- More Languages -->
									<button class="hover:bg-gray-100 rounded-full w-10 h-10 my-auto
                      transition-colors duration-100">
                      <i class="mdi mdi-chevron-down text-gray-500"></i>
                    </button>
								</nav>
							</div>

							<!-- Switch Languages -->
							<div class="w-1/12">
								<div class="flex items-center justify-center">
									<button class="hover:bg-gray-100 rounded-full 
                      w-10 h-10 mt-1
                      transition-colors duration-100">
                      <i class="mdi mdi-swap-horizontal mdi-24px text-gray-600"></i>
                    </button>
								</div>
							</div>

							<!-- To Languages -->
							<div class="w-7/12">
								<nav class="flex flex-row rounded-tl-lg">
									<!-- Lang: English -->
									<button class="uppercase py-3.5 px-3
                      text-gray-600 font-semibold 
                      text-xs lg:text-sm
                      hover:bg-gray-50 hover:text-gray-700
                      transition-colors duration-100">
                      English
                    </button>

									<!-- Lang: Turkish -->
									<button class="uppercase py-3.5 px-3
                      text-gray-600 font-semibold 
                      text-xs lg:text-sm
                      hover:bg-gray-50 hover:text-gray-700
                      transition-colors duration-100
                      text-blue-500 hover:text-blue-600
                      border-b-2 border-blue-500 ">
                      Turkish
                    </button>

									<!-- Lang: Japanese -->
									<button class="uppercase py-3.5 px-3
                      text-gray-600 font-semibold 
                      text-xs lg:text-sm
                      hover:bg-gray-50 hover:text-gray-700
                      transition-colors duration-100">
                      Japanese
                    </button>

									<!-- More Languages -->
									<button class="hover:bg-gray-100 rounded-full w-10 h-10 my-auto
                      transition-colors duration-100">
                      <i class="mdi mdi-chevron-down text-gray-500"></i>
                    </button>
								</nav>
							</div>
						</div>

						<!-- Translate Inputs -->
						<div class="flex">
							<!-- Input Container -->
							<div class="w-6/12 border-r border-gray-200 p-4">
								<div class="h-40">
									<div class="flex flex-row">
										<!-- Input Area -->
										<textarea class="resize-none w-full focus:outline-none
                        text-base lg:text-2xl text-blak
                        custom-scrollbar" rows="5" spellcheck="false" maxlength="5000" x-model="sourceText"
                        x-on:keyup="translatedText = await translation(sourceText)"></textarea>

										<button class="hover:bg-gray-100 rounded-full 
                          w-10 h-10 mt-1
                          transition-colors duration-100" title="Clear" x-show="sourceText.length"
                        x-on:click="sourceText = ''; translatedText = 'Translation';">
                        <i class="mdi mdi-window-close mdi-24px text-red-400"></i>
                      </button>
									</div>
								</div>

								<!-- Input Buttons -->
								<div class="h-10">
									<div class="flex flex-grow">
										<div class="flex-none">
											<button class="hover:bg-gray-200 rounded-full 
                          w-10 h-10
                          transition-colors duration-100">
                          <i class="mdi mdi-microphone mdi-24px text-gray-400"></i>
                        </button>

											<button class="hover:bg-gray-200 rounded-full 
                          w-10 h-10
                          transition-colors duration-100" x-show="sourceText.length">
                          <i class="mdi mdi-volume-high mdi-24px text-gray-600"></i>
                        </button>
										</div>

										<div class="grow">
											<div class="flex float-right">
												<div class="text-sm text-gray-400 pt-5"
													x-text="`${sourceText.length}/5000`">
													0/5000
												</div>

												<button class="hover:bg-gray-200 rounded-full 
                            w-10 h-10 mt-2 ml-2
                            transition-colors duration-100">
                            <i class="mdi mdi-keyboard-outline mdi-18px text-gray-600"></i>
                          </button>
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- Output Container -->
							<div class="w-6/12 bg-gray-100 rounded-br-lg p-4">
								<div class="h-40">
									<!-- Output Area -->
									<div class="text-base lg:text-2xl text-black h-10"
										:class="{ 'opacity-60' : !sourceText.length }" x-text="translatedText"></div>
								</div>

								<!-- Output Buttons -->
								<div class="h-10">
									<div class="flex flex-grow" x-show="sourceText.length">
										<div class="flex-none">
											<button class="hover:bg-gray-200 rounded-full 
                          w-10 h-10 mt-1
                          transition-colors duration-100">
                          <i class="mdi mdi-volume-high mdi-24px text-gray-600"></i>
                        </button>
										</div>

										<div class="grow">
											<div class="flex float-right">
												<button id="copy-translation" class="hover:bg-gray-200 rounded-full 
                              w-10 h-10 mt-1
                              transition-colors duration-100" :data-clipboard-text="translatedText"
                            x-on:click="Toastify({text: 'Translation copied to your clipboard.', className: 'success rounded-md'}).showToast()">
                            <i class="mdi mdi-content-copy mdi-18px text-gray-600"></i>
                          </button>

												<button class="hover:bg-gray-200 rounded-full 
                            w-10 h-10 mt-1
                            transition-colors duration-100">
                            <i class="mdi mdi-thumbs-up-down-outline mdi-18px text-gray-600"></i>
                          </button>

												<button class="hover:bg-gray-200 rounded-full 
                            w-10 h-10 mt-1
                            transition-colors duration-100">
                            <i class="mdi mdi-share-variant mdi-18px text-gray-600"></i>
                          </button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Bottom Buttons -->
	<div class="flex flex-wrap items-center justify-center space-x-4 mt-20">
		<!-- History -->
		<div class="flex flex-col">
			<button class="hover:bg-gray-50 rounded-full w-20 h-20 mr-2 
          border border-gray-200
          transition-colors duration-100">
          <i class="mdi mdi-history mdi-32px text-gray-500"></i>
        </button>

			<div class="text-center text-sm mt-2 pr-2
          text-base text-gray-500 font-semibold">
				History
			</div>
		</div>

		<!-- Saved Translations -->
		<div class="flex flex-col">
			<button class="hover:bg-gray-50 rounded-full w-20 h-20 mr-2 
          border border-gray-200
          transition-colors duration-100">
          <i class="mdi mdi-star mdi-32px text-gray-500"></i>
        </button>

			<div class="text-center text-sm mt-2 pr-2
          text-base text-gray-500 font-semibold">
				Saved
			</div>
		</div>

		<!-- Contribute -->
		<div class="flex flex-col">
			<button class="hover:bg-gray-50 rounded-full w-20 h-20 mr-2 
          border border-gray-200
          transition-colors duration-100">
          <i class="mdi mdi-account-multiple-outline mdi-32px text-gray-500"></i>
        </button>

			<div class="text-center text-sm mt-2 pr-2
          text-base text-gray-500 font-semibold">
				Contribute
			</div>
		</div>
	</div>

	<!-- Notes -->
	<div class="flex opacity-50">
		<span class="text-center font-bold my-20 mx-auto">
        MDI icons used (npm i @mdi/font)

        <hr class="my-4">

        <a href="https://egoistdeveloper.github.io/twcss-to-sass-playground/" target="_blank" class="text-blue-600">
          Convert this template to SASS
        </a>

        <hr class="my-4">

        <a href="https://www.flaticon.com/packs/google-suite-16?word=google%20suite" target="_blank"
          class="text-blue-600">
          Google Suite Icons
        </a>
      </span>
	</div>
</div>

<script>
	function appInit() {
      new ClipboardJS('#copy-translation');
    }

    async function translation(sourceText) {
      if (sourceText) {
        if (sourceText.length > 0 && sourceText.length < 5001) {
          return await translate(sourceText, {
            from: 'en',
            to: 'tr',
            cache: 60 * 60 * 24
          });
        }
      }

      return 'Translation';
    }

    const apps = [{
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965306.png",
        name: "Gmail",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965278.png",
        name: "Search",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965363.png",
        name: "Youtube",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965283.png",
        name: "Translate",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965311.png",
        name: "Photos",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965293.png",
        name: "Calendar",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965323.png",
        name: "Drive",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965281.png",
        name: "Maps",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965274.png",
        name: "Hangouts",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965358.png",
        name: "Keep",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965317.png",
        name: "Adwords",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965327.png",
        name: "Sheets",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965330.png",
        name: "Business",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965360.png",
        name: "Forms",
      },
      {
        icon: "https://cdn-icons-png.flaticon.com/512/2965/2965297.png",
        name: "News",
      },
    ];
</script>

How to make a Google Translate Clone Template with Tailwind CSS?

Install tailwind css of verion 3.0.18

Use the script html tag to import the script of Tailwind CSS of the version 3.0.18

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to make a Google Translate Clone Template component

  • relative
  • bg-white
  • flex
  • flex-grow
  • px-5
  • py-2
  • border-b
  • border-gray-200
  • flex-none
  • mt-1
  • hover:bg-gray-100
  • w-9
  • h-9
  • mr-2
  • text-gray-500
  • mt-2
  • ml-2
  • my-auto
  • text-lg
  • m-1
  • flex-wrap
  • absolute
  • right-5
  • top-18
  • px-4
  • h-96
  • overflow-y-scroll
  • h-20
  • w-20
  • mx-1
  • my-2
  • hover:bg-blue-100
  • h-10
  • mx-auto
  • mt-4
  • text-sm
  • text-center
  • text-gray-700
  • border-blue-200
  • hover:bg-blue-50/50
  • px-3
  • py-1
  • mb-4
  • mt-10
  • before:bg-gray-50
  • before:h-24
  • before:w-full
  • before:border-b
  • before:z-0
  • z-10
  • px-0
  • lg:px-24
  • py-4
  • text-base
  • text-blue-700
  • text-blue-600
  • flex-row
  • pb-4
  • top-32
  • w-full
  • border-gray-300
  • w-7/12
  • py-3.5
  • text-gray-600
  • text-xs
  • hover:bg-gray-50
  • text-blue-500
  • border-b-2
  • border-blue-500
  • w-10
  • w-1/12
  • w-6/12
  • border-r
  • p-4
  • h-40
  • lg:text-2xl
  • text-red-400
  • hover:bg-gray-200
  • text-gray-400
  • float-right
  • pt-5
  • bg-gray-100
  • text-black
  • mt-20
  • flex-col
  • my-20
  • my-4

87 steps to make a Google Translate Clone Template component with Tailwind CSS

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

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

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

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

  5. Control the horizontal padding of an element to 1.25rem using the px-5 utilities.

  6. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  7. Control the border color of an element to b using the border-b utilities.

  8. Control the border color of an element to gray-200 using the border-gray-200 utilities.

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

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

  11. Control the background color of an element to gray-100 using the hover:bg-gray-100 utilities on hover.

  12. Use w-9 to set an element to a fixed width(2.25rem).

  13. Use h-9 to set an element to a fixed height(2.25rem).

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

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

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

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

  18. Control the vertical margin of an element to auto using the my-auto utilities.

  19. Control the text color of an element to lg using the text-lg utilities.

  20. Control the margin on all sides of an element to 0.25rem using the m-1 utilities.

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

  22. 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.

  23. Use the right-5 utilities to set the right position of a positioned element to 1.25rem.

  24. Use the top-18 utilities to set the top position of a positioned element to 4.5rem.

  25. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  26. Use h-96 to set an element to a fixed height(24rem).

  27. Use overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

  28. Use h-20 to set an element to a fixed height(5rem).

  29. Use w-20 to set an element to a fixed width(5rem).

  30. Control the horizontal margin of an element to 0.25rem using the mx-1 utilities.

  31. Control the vertical margin of an element to 0.5rem using the my-2 utilities.

  32. Control the background color of an element to blue-100 using the hover:bg-blue-100 utilities on hover.

  33. Use h-10 to set an element to a fixed height(2.5rem).

  34. Control the horizontal margin of an element to auto using the mx-auto utilities.

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

  36. Control the text color of an element to sm using the text-sm utilities.

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

  38. Control the text color of an element to gray-700 using the text-gray-700 utilities.

  39. Control the border color of an element to blue-200 using the border-blue-200 utilities.

  40. Control the background color of an element to blue-50/50 using the hover:bg-blue-50/50 utilities on hover.

  41. Control the horizontal padding of an element to 0.75rem using the px-3 utilities.

  42. Control the vertical padding of an element to 0.25rem using the py-1 utilities.

  43. Control the margin on bottom side of an element to 1rem using the mb-4 utilities.

  44. Control the margin on top side of an element to 2.5rem using the mt-10 utilities.

  45. Control the background color of an element to gray-50 using the before:bg-gray-50 utilitiesundefined.

  46. Use before:h-24 to set an element to a fixed height(6rem)undefined.

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

  48. Control the border color of an element to b using the before:border-b utilitiesundefined.

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

  50. 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.

  51. Control the horizontal padding of an element to 0rem using the px-0 utilities.

  52. Control the horizontal padding of an element to 6rem at only large screen sizes using the lg:px-24 utilities.

  53. Control the vertical padding of an element to 1rem using the py-4 utilities.

  54. Control the text color of an element to base using the text-base utilities.

  55. Control the text color of an element to blue-700 using the text-blue-700 utilities.

  56. Control the text color of an element to blue-600 using the text-blue-600 utilities.

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

  58. Control the padding on bottom side of an element to 1rem using the pb-4 utilities.

  59. Use the top-32 utilities to set the top position of a positioned element to 8rem.

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

  61. Control the border color of an element to gray-300 using the border-gray-300 utilities.

  62. Use w-7/12 to set an element to a fixed width(7/12).

  63. Control the vertical padding of an element to 3.5 using the py-3.5 utilities.

  64. Control the text color of an element to gray-600 using the text-gray-600 utilities.

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

  66. Control the background color of an element to gray-50 using the hover:bg-gray-50 utilities on hover.

  67. Control the text color of an element to blue-500 using the text-blue-500 utilities.

  68. Control the border color of an element to b-2 using the border-b-2 utilities.

  69. Control the border color of an element to blue-500 using the border-blue-500 utilities.

  70. Use w-10 to set an element to a fixed width(2.5rem).

  71. Use w-1/12 to set an element to a fixed width(1/12).

  72. Use w-6/12 to set an element to a fixed width(6/12).

  73. Control the border color of an element to r using the border-r utilities.

  74. Control the padding on all sides of an element to 1rem using the p-4 utilities.

  75. Use h-40 to set an element to a fixed height(10rem).

  76. Control the text color of an element to 2xl at only large screen sizes using the lg:text-2xl utilities.

  77. Control the text color of an element to red-400 using the text-red-400 utilities.

  78. Control the background color of an element to gray-200 using the hover:bg-gray-200 utilities on hover.

  79. Control the text color of an element to gray-400 using the text-gray-400 utilities.

  80. Use float-right to float an element to the right of its container.

  81. Control the padding on top side of an element to 1.25rem using the pt-5 utilities.

  82. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  83. Control the text color of an element to black using the text-black utilities.

  84. Control the margin on top side of an element to 5rem using the mt-20 utilities.

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

  86. Control the vertical margin of an element to 5rem using the my-20 utilities.

  87. Control the vertical margin of an element to 1rem using the my-4 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Google Translate Clone Template components, learn and follow along to implement your own components.