Create Animated Input Field Floating Label UI With Latest Tailwindcss v2.2.0

preview_player
Показать описание
In this video, we will look into how to create an input ui with some transition in the ui using the latest tailwindcss v2.2.0.

Social Media Links:

Let's be friends

Follow On Facebook

Follow On Twitter

Final Code:

Tech stack:
Tailwindcss

#css #tailwindcss #laratips
Рекомендации по теме
Комментарии
Автор

When you write some text in the input and then click on the outside, the label will overlap the text. To fix this you need some JavaScript. Thanks, Aashiq Aasnat for pointing it out.

You need to first add and id to the label as 'username-label', then you can add this in the JavaScript. This code is just adding and removing some classes depending on the value of the input.
<script>
let label =

.addEventListener('input', event => {
let input = event.target;

if (event.target.value) {
['border-purple-600', 'border-b-2'].forEach(c => input.classList.add(c));
['text-xs', '-top-4', 'text-purple-600'].forEach(c => label.classList.add(c));
} else {
['border-purple-600', 'border-b-2'].forEach(c => input.classList.remove(c));
['text-xs', '-top-4', 'text-purple-600'].forEach(c => label.classList.remove(c));
}
})
</script>

Laratips
Автор

Daaami ❤️. Feri yesto dami dekhkhiyo bhane hanuwla subscribe

sharmajikaladka
Автор

Thanks a lot.... This is step-by-step kind info.

AnkurRajbongshi-uq
Автор

how can we do this to a drop down select

therevealmusic
Автор

Thankns for the video, you saved my day

penksantuyyy
Автор

So you didn't show what happens after you write something on the input, label overlap with the input text. plz fix it

aashiq_hasnat
Автор

Instead of a JavaScript solution for the overlapping texts, another alternative would be to use the peer-placeholder-shown pseudo-class:

text-xs
peer-focus:text-xs


Then just use an empty placeholder in the input field: placeholder=" "

karlnewgrove