<body> <div class="w-screen h-screen bg-indigo-700 p-20"> <h1 class="text-2xl text-white font-light mb-10">Animated Search Field Example by KindaCode.com</h1> <form> <input type="text" name="search" placeholder="Search" class="bg-white px-5 py-3 text-gray-800 w-48 border-0 rounded-full focus:outline-0 focus:w-full duration-500" /> </form> </div> </body>
- In the beginning, the width of the input is set to w-48 (12rem or 192px). When it gets focused, the width expands to w-full (the width of the parent). We styled the search field on the focus state by using the focus modifier.
- To make the change smooth and not sudden, we added the duration-500 utility class.
- Tailwind CSS: How to Disable Text Selection
- Using Tailwind CSS with Font Awesome Icons: A Deep Dive
- Full-Screen Search Box with Tailwind CSS
- How to Style a Pagination with Tailwind CSS
- Tailwind CSS: Create an Animated & Closable Side Menu
You can also check out our CSS category page for the latest tutorials and examples.