Published on

6 Easy Ways To Build A Safari With Tailwind CSS

Safari

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to create responsive and customizable user interfaces quickly. It provides a set of pre-defined CSS classes that you can use to style your HTML elements without writing any custom CSS code.

The description of Safari ui component

Safari is a popular web browser developed by Apple. It has a unique user interface that includes a top bar with buttons for navigation, a search bar, and a bookmarks bar. In this article, we will show you how to create a Safari-like user interface using Tailwind CSS.

Why use Tailwind CSS to create a Safari ui component?

Tailwind CSS is an excellent choice for creating user interfaces because it provides a wide range of pre-defined CSS classes that you can use to style your HTML elements. This saves you time and effort, as you don't have to write any custom CSS code. Additionally, Tailwind CSS is highly customizable, so you can easily modify the default styles to match your design requirements.

The preview of Safari ui component

To create a Safari-like user interface using Tailwind CSS, you will need to use a combination of HTML and CSS. Here's a preview of what the final result will look like:

Free download of the Safari's source code

The source code of Safari ui component

To create a Safari-like user interface using Tailwind CSS, you will need to use a combination of HTML and CSS. Here's the source code:

<!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/tailwindcss@^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 create a Safari with Tailwind CSS?

Now that you have an idea of what the final result will look like and the source code required to create it, let's dive into the step-by-step process of creating a Safari-like user interface using Tailwind CSS.

Step 1: Set up your HTML structure

The first step is to set up the HTML structure for your Safari-like user interface. You will need to create a top bar with buttons for navigation, a search bar, and a bookmarks bar. Here's an example HTML structure to get you started:

<div class="bg-gray-800">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between py-4">
      <div class="flex items-center">
        <button class="text-white pr-4">
          <i class="fas fa-arrow-left"></i>
        </button>
        <button class="text-white pr-4">
          <i class="fas fa-arrow-right"></i>
        </button>
        <button class="text-white pr-4">
          <i class="fas fa-redo"></i>
        </button>
        <button class="text-white">
          <i class="fas fa-bars"></i>
        </button>
      </div>
      <div class="flex items-center">
        <input type="text" placeholder="Search" class="px-4 py-2 rounded-lg border-none focus:outline-none focus:ring-2 focus:ring-blue-500">
        <button class="bg-blue-500 text-white px-4 py-2 rounded-lg ml-4">
          Go
        </button>
      </div>
      <div class="flex items-center">
        <button class="text-white pr-4">
          <i class="fas fa-bookmark"></i>
        </button>
        <button class="text-white">
          <i class="fas fa-ellipsis-h"></i>
        </button>
      </div>
    </div>
  </div>
</div>

In this example, we have used Tailwind CSS classes to style the HTML elements. We have used the bg-gray-800 class to set the background color of the top bar to gray, and the container, mx-auto, and px-4 classes to center the content and add some padding.

We have also used the flex class to create a flexible container for the buttons and input field. The items-center class is used to center the content vertically, and the justify-between class is used to distribute the content evenly across the container.

Step 2: Style the buttons

The next step is to style the buttons in the top bar. We will use the text-white, pr-4, bg-blue-500, px-4, py-2, and rounded-lg classes to style the buttons. Here's an example:

<button class="text-white pr-4">
  <i class="fas fa-arrow-left"></i>
</button>
<button class="text-white pr-4">
  <i class="fas fa-arrow-right"></i>
</button>
<button class="text-white pr-4">
  <i class="fas fa-redo"></i>
</button>
<button class="text-white">
  <i class="fas fa-bars"></i>
</button>

In this example, we have used the text-white class to set the text color of the buttons to white, the pr-4 class to add some right padding, and the rounded-lg class to round the corners of the buttons.

Step 3: Style the input field

The next step is to style the input field in the top bar. We will use the px-4, py-2, rounded-lg, border-none, focus:outline-none, and focus:ring-2 classes to style the input field. Here's an example:

<input type="text" placeholder="Search" class="px-4 py-2 rounded-lg border-none focus:outline-none focus:ring-2 focus:ring-blue-500">

In this example, we have used the px-4 and py-2 classes to add some padding to the input field, the rounded-lg class to round the corners of the input field, and the border-none class to remove the border.

We have also used the focus:outline-none class to remove the outline when the input field is focused, and the focus:ring-2 and focus:ring-blue-500 classes to add a blue ring around the input field when it is focused.

Step 4: Style the bookmarks bar

The final step is to style the bookmarks bar in the top bar. We will use the text-white and pr-4 classes to style the bookmarks bar. Here's an example:

<button class="text-white pr-4">
  <i class="fas fa-bookmark"></i>
</button>
<button class="text-white">
  <i class="fas fa-ellipsis-h"></i>
</button>

In this example, we have used the text-white class to set the text color of the bookmarks bar to white, and the pr-4 class to add some right padding.

Conclusion

In this article, we have shown you how to create a Safari-like user interface using Tailwind CSS. We have explained why Tailwind CSS is an excellent choice for creating user interfaces and provided a step-by-step guide on how to create a Safari-like user interface using Tailwind CSS.

By following the steps outlined in this article, you can create a responsive and customizable Safari-like user interface quickly and easily. So, what are you waiting for? Start building your Safari with Tailwind CSS today!