JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<head>
<link rel="shortcut icon" href="/favicon.png" type="image/x-icon">
<title>My Todo With Local Storage</title>
<style type="text/css">
body
{
overflow-y: scroll; overflow-x:hidden;
margin:0;
padding:0;
}
span
{
font-size: 22px;
padding-right: 5px;
color: #FFF;
}
/* Animation property */
.button_animate {
animation: wiggle 2s linear;
}
#myButton:focus {outline:0;}
/* Keyframes */
@keyframes wiggle {
0%, 7% {
transform: rotateZ(0);
}
15% {
transform: rotateZ(-7deg);
}
20% {
transform: rotateZ(5deg);
}
25% {
transform: rotateZ(-5deg);
}
30% {
transform: rotateZ(3deg);
}
35% {
transform: rotateZ(-1deg);
}
40%, 100% {
transform: rotateZ(0);
}
}
#myButton {
height: 4em;
width: 305px;
background: #0F2027; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+,...