Published on

6 Easy Ways To Build A Safari With Tailwind CSS

Tags
PagesWidget
Safari

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 Safari ui component

Safari created in tailwind css (the best css framework ever)

Why use Tailwind CSS to make a Safari ui component?

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

The preview of Safari ui component

Free download of the Safari's source code

The source code of Safari ui component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Safari | Tailwind CSS </title>
    <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet" />
    <!-- <link rel="stylesheet" href="./assets/styles/styles.css" /> -->
    <style>
      body {
        background: url('https://images.hdqwalls.com/download/big-sur-4k-wp-1600x1200.jpg');
        background-repeat: no-repeat;
        background-size: cover;
      }

      main {
        background: url('https://wallpapercave.com/wp/wp4426951.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        height: 80vh;
      }

      .search-input {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' d='M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: left 0.75rem center;
        background-size: 0.9rem 1.25rem;
      }
    </style>
  </head>
  <body class="h-screen">
    <div class="h-screen p-5">
      <section class="shadow-xl rounded-md bg-white w-full md:w-5/6 mx-auto">
        <header class="flex justify-between items-center py-1 px-5">
          <div class="flex flex-row items-center">
            <div class="bg-red-400 text-white rounded-full p-1 mr-2 cursor-pointer h-4 w-4">
            </div>
            <div class="bg-yellow-400 text-white rounded-full p-1 mr-2 cursor-pointer h-4 w-4">
            </div>
            <div class="bg-green-400 text-white rounded-full p-1 mr-5 cursor-pointer h-4 w-4">
            </div>
            <button class="flex flex-col justify-center items-center p-1 m-1 rounded-full text-gray-500 transition-color hover:bg-gray-100 hover:bg-opacity-60 focus:outline-none focus:ring-2">
              <svg class="fill-current h-5 w-5" viewBox="0 0 20 20">
                <path d="M3.015,4.779h1.164V3.615H3.015V4.779z M18.73,1.869H1.269c-0.322,0-0.582,0.26-0.582,0.582v15.133
                  c0,0.322,0.26,0.582,0.582,0.582H18.73c0.321,0,0.582-0.26,0.582-0.582V2.451C19.312,2.129,19.052,1.869,18.73,1.869z
                  M18.148,16.42c0,0.322-0.261,0.582-0.582,0.582H2.433c-0.322,0-0.582-0.26-0.582-0.582V6.525h16.297V16.42z M18.148,5.361H1.851
                  V3.615c0-0.322,0.26-0.582,0.582-0.582h15.133c0.321,0,0.582,0.26,0.582,0.582V5.361z M7.671,4.779h1.165V3.615H7.671V4.779z
                  M5.344,4.779h1.164V3.615H5.344V4.779z"></path>
              </svg>
            </button>
            <button class="flex flex-col justify-center items-center p-1 m-1 rounded-full text-gray-400 transition-color hover:bg-gray-100 hover:bg-opacity-60 focus:outline-none focus:ring-2">
              <svg class="fill-current h-5 w-5" viewBox="0 0 20 20">
                <path
                  d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
                ></path>
              </svg>
            </button>
            <button class="flex flex-col justify-center items-center p-1 m-1 rounded-full text-gray-400 transition-color hover:bg-gray-100 hover:bg-opacity-60 focus:outline-none focus:ring-2">
              <svg class="fill-current h-5 w-5" viewBox="0 0 20 20">
                <path
                  d="M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z"
                ></path>
              </svg>
            </button>
          </div>
          <div class="">
            <input
              type="text"
              placeholder="Search or enter website name"
              class="search-input bg-gray-100 placeholder-gray-400 text-gray-400 text-sm py-1 px-10 rounded-md outline-none w-full focus:outline-none focus:ring"
            />
          </div>
          <div class="flex flex-row items-center text-gray-400">
            <button class="flex flex-col justify-center items-center p-1 m-1 rounded-full transition-colors hover:bg-gray-100 hover:bg-opacity-60 focus:outline-none focus:ring-2">
              <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
                <path
                  d="M8.416,3.943l1.12-1.12v9.031c0,0.257,0.208,0.464,0.464,0.464c0.256,0,0.464-0.207,0.464-0.464V2.823l1.12,1.12c0.182,0.182,0.476,0.182,0.656,0c0.182-0.181,0.182-0.475,0-0.656l-1.744-1.745c-0.018-0.081-0.048-0.16-0.112-0.224C10.279,1.214,10.137,1.177,10,1.194c-0.137-0.017-0.279,0.02-0.384,0.125C9.551,1.384,9.518,1.465,9.499,1.548L7.76,3.288c-0.182,0.181-0.182,0.475,0,0.656C7.941,4.125,8.234,4.125,8.416,3.943z M15.569,6.286h-2.32v0.928h2.32c0.512,0,0.928,0.416,0.928,0.928v8.817c0,0.513-0.416,0.929-0.928,0.929H4.432c-0.513,0-0.928-0.416-0.928-0.929V8.142c0-0.513,0.416-0.928,0.928-0.928h2.32V6.286h-2.32c-1.025,0-1.856,0.831-1.856,1.856v8.817c0,1.025,0.832,1.856,1.856,1.856h11.138c1.024,0,1.855-0.831,1.855-1.856V8.142C17.425,7.117,16.594,6.286,15.569,6.286z"
                ></path>
              </svg>
            </button>
            <button class="flex flex-col justify-center items-center p-1 m-1 rounded-full transition-color hover:bg-gray-100 hover:bg-opacity-60 focus:outline-none focus:ring-2">
              <svg class="fill-current h-4 w-4" viewBox="0 0 25 25">
                <path d="M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z"/>
              </svg>
            </button>
            <button class="flex flex-col justify-center items-center p-1 m-1 rounded-full transition-color hover:bg-gray-100 hover:bg-opacity-60 focus:outline-none focus:ring-2">
              <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
                <path
                  d="M18.378,1.062H3.855c-0.309,0-0.559,0.25-0.559,0.559c0,0.309,0.25,0.559,0.559,0.559h13.964v13.964
                  c0,0.309,0.25,0.559,0.559,0.559c0.31,0,0.56-0.25,0.56-0.559V1.621C18.938,1.312,18.688,1.062,18.378,1.062z M16.144,3.296H1.621
                  c-0.309,0-0.559,0.25-0.559,0.559v14.523c0,0.31,0.25,0.56,0.559,0.56h14.523c0.309,0,0.559-0.25,0.559-0.56V3.855
                  C16.702,3.546,16.452,3.296,16.144,3.296z M15.586,17.262c0,0.31-0.25,0.558-0.56,0.558H2.738c-0.309,0-0.559-0.248-0.559-0.558
                  V4.972c0-0.309,0.25-0.559,0.559-0.559h12.289c0.31,0,0.56,0.25,0.56,0.559V17.262z"
                ></path>
              </svg>
            </button>
          </div>
        </header>
        <main class="flex flex-col justify-center rounded-b-md">
          <div class="flex flex-col justify-center items-center p-5">
            <div class="lg:w-3/4 mx-auto">
              <h1 class="text-white text-lg font-bold mb-3">Favourites</h1>
              <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-4">
                <div class="max-w-xs cursor-pointer block p-2 rounded-md transition-colors hover:bg-gray-50 hover:bg-opacity-30">
                  <div class="bg-white rounded-md mb-2 flex justify-center items-center">
                    <img class="h-20 rounded-md" src="https://www.iconpacks.net/icons/2/free-youtube-logo-icon-2431-thumb.png" alt="YT icon">
                  </div>
                  <h2 class="text-white text-center font-semibold">Channel</h2>
                </div>
                <div class="cursor-pointer block p-1 rounded-md transition-colors hover:bg-gray-50 hover:bg-opacity-30">
                  <div class="bg-white rounded-md mb-2 flex justify-center items-center">
                    <img class="h-20 rounded-md" src="https://www.iconpacks.net/icons/2/free-youtube-logo-icon-2431-thumb.png" alt="YT icon">
                  </div>
                  <h2 class="text-white text-center font-semibold">Videos</h2>
                </div>
                <a href="https://tailwindcomponents.com/u/dece0" target="_blank" rel="noopener noreferrer" class="cursor-pointer block p-1 rounded-md transition-colors hover:bg-gray-50 hover:bg-opacity-30">
                  <div class="bg-white rounded-md mb-2 flex justify-center items-center">
                    <img class="h-20 rounded-md" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="Github icon">
                  </div>
                  <h2 class="text-white text-center font-semibold">Dece0</h2>
                </a>
                <a href="http://svgicons.sparkk.fr/" target="_blank" rel="noopener noreferrer" class="cursor-pointer block p-1 rounded-md transition-colors hover:bg-gray-50 hover:bg-opacity-30">
                  <div class="bg-white rounded-md mb-2 flex justify-center items-center">
                    <svg class="fill-current h-20 text-blue-500" viewBox="0 0 20 20">
                      <path d="M10,2.531c-4.125,0-7.469,3.344-7.469,7.469c0,4.125,3.344,7.469,7.469,7.469c4.125,0,7.469-3.344,7.469-7.469C17.469,5.875,14.125,2.531,10,2.531 M10,3.776c1.48,0,2.84,0.519,3.908,1.384c-1.009,0.811-2.111,1.512-3.298,2.066C9.914,6.072,9.077,5.017,8.14,4.059C8.728,3.876,9.352,3.776,10,3.776 M6.903,4.606c0.962,0.93,1.82,1.969,2.53,3.112C7.707,8.364,5.849,8.734,3.902,8.75C4.264,6.976,5.382,5.481,6.903,4.606 M3.776,10c2.219,0,4.338-0.418,6.29-1.175c0.209,0.404,0.405,0.813,0.579,1.236c-2.147,0.805-3.953,2.294-5.177,4.195C4.421,13.143,3.776,11.648,3.776,10 M10,16.224c-1.337,0-2.572-0.426-3.586-1.143c1.079-1.748,2.709-3.119,4.659-3.853c0.483,1.488,0.755,3.071,0.784,4.714C11.271,16.125,10.646,16.224,10,16.224 M13.075,15.407c-0.072-1.577-0.342-3.103-0.806-4.542c0.673-0.154,1.369-0.243,2.087-0.243c0.621,0,1.22,0.085,1.807,0.203C15.902,12.791,14.728,14.465,13.075,15.407 M14.356,9.378c-0.868,0-1.708,0.116-2.515,0.313c-0.188-0.464-0.396-0.917-0.621-1.359c1.294-0.612,2.492-1.387,3.587-2.284c0.798,0.97,1.302,2.187,1.395,3.517C15.602,9.455,14.99,9.378,14.356,9.378"></path>
                    </svg>
                  </div>
                  <h2 class="text-white text-center font-semibold">SVG icons</h2>
                </a>
                <div class="cursor-pointer block p-1 rounded-md transition-colors hover:bg-gray-50 hover:bg-opacity-30">
                  <div class="bg-white rounded-md mb-2 flex justify-center items-center">
                    <img class="h-20 rounded-md" src="https://images-na.ssl-images-amazon.com/images/I/41AD72RCzmL.png" alt="NY times icon">
                  </div>
                  <h2 class="text-white text-center font-semibold">NY Times</h2>
                </div>
                <div class="cursor-pointer block p-1 rounded-md transition-colors hover:bg-gray-50 hover:bg-opacity-30">
                  <div class="bg-white rounded-md mb-2 flex justify-center items-center">
                    <img class="h-20 rounded-md" src="https://www.stuba.sk/buxus/assets/images/web/icons/stu_800.png" alt="STU icon">
                  </div>
                  <h2 class="text-white text-center font-semibold">STU</h2>
                </div>
              </div>
            </div>
          </div>
        </main>
      </section>
    </div>
  </body>
</html>

How to make a Safari with Tailwind CSS?

Install tailwind css of verion 2.1.0

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

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

All the unility class needed to make a Safari component

  • h-screen
  • p-5
  • bg-white
  • w-full
  • md:w-5/6
  • mx-auto
  • flex
  • py-1
  • px-5
  • flex-row
  • bg-red-400
  • text-white
  • p-1
  • mr-2
  • h-4
  • w-4
  • bg-yellow-400
  • bg-green-400
  • mr-5
  • flex-col
  • m-1
  • text-gray-500
  • hover:bg-gray-100
  • hover:bg-opacity-60
  • h-5
  • w-5
  • text-gray-400
  • bg-gray-100
  • text-sm
  • px-10
  • lg:w-3/4
  • text-lg
  • mb-3
  • grid
  • grid-cols-3
  • sm:grid-cols-4
  • md:grid-cols-5
  • lg:grid-cols-6
  • xl:grid-cols-8
  • gap-4
  • max-w-xs
  • block
  • p-2
  • hover:bg-gray-50
  • hover:bg-opacity-30
  • mb-2
  • h-20
  • text-center
  • text-blue-500

49 steps to make a Safari component with Tailwind CSS

  1. Use h-screen to make an element span the entire height of the viewport.

  2. Control the padding on all sides of an element to 1.25rem using the p-5 utilities.

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

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

  5. Use md:w-5/6 to set an element to a fixed width(5/6) at only medium screen sizes.

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

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

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

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

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

  11. Control the background color of an element to red-400 using the bg-red-400 utilities.

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

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

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

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

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

  17. Control the background color of an element to yellow-400 using the bg-yellow-400 utilities.

  18. Control the background color of an element to green-400 using the bg-green-400 utilities.

  19. Control the margin on right side of an element to 1.25rem using the mr-5 utilities.

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

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

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

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

  24. Control the background color of an element to opacity-60 using the hover:bg-opacity-60 utilities on hover.

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

  26. Use w-5 to set an element to a fixed width(1.25rem).

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

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

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

  30. Control the horizontal padding of an element to 2.5rem using the px-10 utilities.

  31. Use lg:w-3/4 to set an element to a fixed width(3/4) at only large screen sizes.

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

  33. Control the margin on bottom side of an element to 0.75rem using the mb-3 utilities.

  34. Use grid to create a grid container.

  35. Use grid to create a grid container.

  36. Use grid to create a grid container at only small screen sizes.

  37. Use grid to create a grid container at only medium screen sizes.

  38. Use grid to create a grid container at only large screen sizes.

  39. Use grid to create a grid container at only extremely large screen sizes.

  40. To specify the width between columns, you can use the gap-4 utilities.

  41. Set the maximum width/height of an element using the max-w-xs utilities.

  42. Use inline utilities to put the element on its own line and fill its parent.

  43. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

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

  45. Control the background color of an element to opacity-30 using the hover:bg-opacity-30 utilities on hover.

  46. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

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

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

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

Conclusion

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