Tailwind CSS Animated Search Form Example

In this tutorial, we'll create a search bar form with animated using Tailwind CSS.

Tailwind CSS Expanding Search Bar with Animation

<form class="relative" method="get" action="">
  <input
    type="text"
    placeholder="Search"
    class="w-64 py-2 px-4 rounded-full border-2 focus:outline-none focus:border-blue-500 transition-all duration-300 transform focus:scale-110"
  />
</form>

tailwind search bar form with animated

Tailwind CSS Search Form with Animated Search Button

<div class="flex items-center">
  <form class="relative flex items-center" method="get" action="">
    <input
      type="search"
      placeholder="Search"
      class="w-64 py-2 px-4 rounded-full border-2 focus:outline-none focus:border-blue-500 transition-all duration-300 transform focus:scale-110"
    />
    <button type="submit" class="absolute right-0 mr-3">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-6 h-6 text-gray-400"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
        />
      </svg>
    </button>
  </form>
</div>

tailwind search bar icon with animated