Learn how to create a stylish, animated search bar using Tailwind CSS! This tutorial will guide you through the steps to enhance your web design effortlessly. Perfect for developers at all levels!
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 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>