Published on

Ways To Create A Search input full rounded With Tailwind CSS In 60 Minutes

Tags
FormsInputs
Search input full rounded

If you are a front-end developer, you must have heard of Tailwind CSS. It is a utility-first CSS framework that helps you to create a responsive and customizable UI design quickly. In this article, we will discuss how to create a search input full rounded UI component with Tailwind CSS in just 60 minutes.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides you with a set of pre-defined CSS classes. You can use these classes to create a responsive and customizable UI design quickly. It is different from other CSS frameworks like Bootstrap and Foundation because it does not have any pre-built UI components. Instead, it provides you with a set of low-level utility classes that you can use to create your own UI components.

The description of Search input full rounded UI component

The search input full rounded UI component is a commonly used UI element in web development. It is used to allow users to search for specific content on a website. This UI component has a rounded shape and a search icon inside the input field.

Why use Tailwind CSS to create a Search input full rounded UI component?

Tailwind CSS is a great choice for creating a search input full rounded UI component because it provides you with a set of utility classes that you can use to style the component quickly. You don't need to write any custom CSS code, which saves you a lot of time. Additionally, Tailwind CSS is highly customizable, which means you can easily change the color, size, and shape of the search input full rounded UI component.

The preview of Search input full rounded UI component

To create a search input full rounded UI component with Tailwind CSS, we will use the following HTML code:

<div class="relative text-gray-600 focus-within:text-gray-400">
  <span class="absolute inset-y-0 left-0 flex items-center pl-2">
    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="M22 22L15.5 15.5M15.5 15.5C17.9853 12.0153 17.9853 6.98466 15.5 3.5C13.0147 0.0152166 7.98478 0.0152166 5.5 3.5C3.01522 6.98466 3.01522 12.0153 5.5 15.5C7.98478 18.9847 13.0147 18.9847 15.5 15.5Z"></path>
    </svg>
  </span>
  <input class="w-full py-2 text-sm text-white bg-gray-900 rounded-full pl-10 focus:outline-none focus:bg-white focus:text-gray-900" type="text" placeholder="Search...">
</div>

Free download of the Search input full rounded's source code

The source code of Search input full rounded UI component

To create a search input full rounded UI component with Tailwind CSS, we will use the following CSS classes:

.relative {
  position: relative;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.pl-2 {
  padding-left: 0.5rem;
}

.w-6 {
  width: 1.5rem;
}

.h-6 {
  height: 1.5rem;
}

.fill-current {
  fill: currentColor;
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgba(156, 163, 175, var(--tw-text-opacity));
}

.focus-within\\:text-gray-400:focus-within {
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
}

.inset-y-0 {
  top: 0;
  bottom: 0;
}

.left-0 {
  left: 0;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}

.rounded-full {
  border-radius: 9999px;
}

.pl-10 {
  padding-left: 2.5rem;
}

.focus\\:outline-none:focus {
  outline: none;
}

.focus\\:bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.focus\\:text-gray-900:focus {
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
}

<div class="relative text-gray-600">
  <input type="search" name="serch" placeholder="Search" class="bg-white h-10 px-5 pr-10 rounded-full text-sm focus:outline-none">
  <button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
    <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
      <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
    </svg>
  </button>
</div>

How to create a Search input full rounded with Tailwind CSS?

To create a search input full rounded UI component with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the following code:
<div class="relative text-gray-600 focus-within:text-gray-400">
  <span class="absolute inset-y-0 left-0 flex items-center pl-2">
    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="M22 22L15.5 15.5M15.5 15.5C17.9853 12.0153 17.9853 6.98466 15.5 3.5C13.0147 0.0152166 7.98478 0.0152166 5.5 3.5C3.01522 6.98466 3.01522 12.0153 5.5 15.5C7.98478 18.9847 13.0147 18.9847 15.5 15.5Z"></path>
    </svg>
  </span>
  <input class="w-full py-2 text-sm text-white bg-gray-900 rounded-full pl-10 focus:outline-none focus:bg-white focus:text-gray-900" type="text" placeholder="Search...">
</div>
  1. Add the Tailwind CSS CDN link to the head section of your HTML file:
<head>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
</head>
  1. Save the HTML file and open it in your web browser. You should see a search input full rounded UI component.

Conclusion

In this article, we have discussed how to create a search input full rounded UI component with Tailwind CSS in just 60 minutes. We have also discussed why Tailwind CSS is a great choice for creating UI components quickly. By following the steps outlined in this article, you can create your own search input full rounded UI component with ease.