Today we are going to create an animated input field with Tailwind CSS.
Well, you might be wondering why we would want to create an animated input field. There are a few reasons why you might want to do this:
Let’s start by crating the wrapper div that will contain the input field and the label.
flex
is used to create a flex container.flex-col-reverse
is used to create a column layout with the items reversed.<div class="flex flex-col-reverse ">
<!--- Content goes here --->
</div>
peer
is used to designate this element as a reference point for conditional styling of its siblings or children using the peer-* variants.outline-none
is used to remove the default browser outline.ring
is used to add a focus ring to the input field. This adds a subtle visual indicator that the input field is currently focused.px-4
is used to add padding to the left and right of the input field.py-1
is used to add padding to the top and bottom of the input field.h-12
is used to set the height of the input field to 12 pixels.border-0
is used to remove the default border from the input field.rounded-lg
is used to add rounded corners to the input field.ring-gray-200
is used to set the color of the focus ring to gray.duration-500
is used to set the duration of the animation to 500 milliseconds.focus:ring-2
is used to set the width of the focus ring to 2 pixels.focus:border-gray-100
is used to set the color of the border when the input field is focused to gray.relative
is used to position the input field relative to the parent element.placeholder:duration-500
is used to set the duration of the placeholder animation to 500 milliseconds.placeholder:absolute
is used to make the placeholder positioned absolutely.focus:placeholder:pt-10
is used to position the placeholder 10 pixels from the top of the input field when the input field is focused.text-xs
is used to set the font size of the input field to 10 pixels.shadow-xl
is used to add a shadow to the input field.shadow-gray-400/10
is used to set the opacity of the shadow to 10% and the color to gray.focus:shadow-none
is used to remove the shadow when the input field is focused.focus:rounded-md
is used to add rounded corners to the input field when the input field is focused.focus:ring-blue-600
is used to set the color of the focus ring to blue.placeholder:text-gray-400
is used to set the color of the placeholder to gray.<input
type="text"
placeholder="Email Adress"
class="peer ring px-4 py-1 h-12 border-0 rounded-lg ring-gray-200 duration-500 focus:ring-2 focus:border-gray-100 relative placeholder:duration-500 placeholder:absolute focus:placeholder:pt-10 text-xs shadow-xl shadow-gray-400/10 focus:shadow-none focus:rounded-md focus:ring-blue-600 placeholder:text-gray-400"/>
duration-500
is used to set the duration of the animation to 500 milliseconds.opacity-0
is used to set the opacity of the label to 0%.mb-2
is used to add margin-bottom to the label.peer-focus:opacity-100
is used to set the opacity of the label to 100% when the input field is focused.text-gray-500
is used to set the color of the label to gray.text-xs
is used to set the font size of the label to 10 pixels.-translate-y-12
is used to translate the label 12 pixels from the top of the input field.peer-focus:translate-y-0
is used to translate the label back to its original position when the input field is focused.<span class="duration-500 opacity-0 mb-2 peer-focus:opacity-100 text-gray-500 text-xs -translate-y-12 peer-focus:translate-y-0">Email Adress</span>
<div class="flex flex-col-reverse ">
<input placeholder="Email Adress" class="peer outline-none ring px-4 py-1 h-12 border-0 rounded-lg ring-gray-200 duration-500 focus:ring-2 focus:border-gray-100 relative placeholder:duration-500 placeholder:absolute focus:placeholder:pt-10 text-xs shadow-xl shadow-gray-400/10 focus:shadow-none focus:rounded-md focus:ring-blue-600 placeholder:text-gray-400" type="text" />
<span class="duration-500 opacity-0 mb-2 peer-focus:opacity-100 text-gray-500 text-xs -translate-y-12 peer-focus:translate-y-0">Email Adress</span>
</div>
This is just a small example of an animated input field with Tailwind CSS. You can customize it to fit your needs and add more features like other hover effects, styles and so on. Do not forget to make it fully responsive and accessible.
Hope you enjoyed this tutorial and have a god day!
/Michael Andreuzza
"I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."
Stuart
Creator of saasydb.com
"Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"
Alex Hughes
letsloopin.com
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
No subscription required!
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.