JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css">
<form action="#" method="post" id="step-form" class="steps-form">
<div class="row">
<div class="col-xs-12">
<input type="text" name="" id="" class="form-control" placeholder="Name">
</div>
<div class="col-xs-12">
<textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="Message"></textarea>
</div>
<div class="col-xs-12">
<select name="" id="" class="form-control">
<option value="" selected="selected" disabed="disabled">Item</option>
</select>
</div>
</div>
</form>
CSS
body {
background-color: #119251;
}
form {
background-color: #fff;
width: 500px;
margin:75px auto;
top: 50px;
left: 0px;
padding: 25px;
}
.steps-form .form-control {
margin-bottom: 15px;
-webkit-animation: blink 0.5s;
-moz-animation: blink 0.5s;
-o-animation: blink 0.5s;
animation: blink 0.5s;
-webkit-animation-iteration-count: 3;
-moz-animation-iteration-count: 3;
-o-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes blink {
0% {
background-color: #fff;
border-color: #ccc;
}
50% {
background-color: #d2d2d2;
border-color: #000;
}
100% {
background-color: #fff;
border-color: #ccc;
}
}
@-moz-keyframes blink {
0% {
background-color: #fff;
border-color: #ccc;
}
50% {
background-color: #d2d2d2;
border-color: #000;
}
100% {
background-color: #fff;
border-color: #ccc;
}
}
@-o-keyframes blink {
0% {
background-color: #fff;
border-color: #ccc;
}
50% {
background-color: #d2d2d2;
border-color: #000;
}
100% {
background-color: #fff;
border-color: #ccc;
}
}
@keyframes blink {
0% {
background-color: #fff;
border-color: #ccc;
}
50% {
background-color: #d2d2d2;
border-color: #000;
}
100% {
background-color: #fff;
border-color: #ccc;
}
}