JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<input type="text" class="i">
<input type="text" class="i i_e">

CSS

@keyframes err {
	0% {
		box-shadow: 0 0 3px 2px #FF0F56;
	}
	80% {
		box-shadow: 0 0 3px 2px #FF0F56;
	}
	100% {
		box-shadow: 0 0 3px 2px #35bbdc;
	}
}
.i {
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 21px;
    padding: 9px;
}
.i:focus {
    box-shadow: 0 0 3px 2px #35bbdc;
    outline: none;
}
.i_e:focus {
      animation: err 2s ease-in;
}