JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="clearfix"><button id="remarkUpdate" name="remarkUpdate" class="btn btn-red fright" data-seqno="@Model.DeclarationSeqNo" data-role="none"><i id="#loading" class="icon-refresh spin"><></i> Update</button></div>
    
    <br/>

CSS

.btn{
    position:relative;
    display:inline-block;
    padding:.4em;
    margin-bottom:0;
    background:#fff;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    text-decoration:none;
    color:#000;
    font-size:1rem;
    font-weight:normal;
}
.btn-red{
background: rgb(203,28,5);
background: -moz-linear-gradient(top, rgba(203,28,5,1) 0%, rgba(96,15,8,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,28,5,1)), color-stop(100%,rgba(96,15,8,1)));
background: -webkit-linear-gradient(top, rgba(203,28,5,1) 0%,rgba(96,15,8,1) 100%);
background: -o-linear-gradient(top, rgba(203,28,5,1) 0%,rgba(96,15,8,1) 100%);
background: -ms-linear-gradient(top, rgba(203,28,5,1) 0%,rgba(96,15,8,1) 100%);
background: linear-gradient(top, rgba(203,28,5,1) 0%,rgba(96,15,8,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb1c05', endColorstr='#600f08',GradientType=0 );
color:#FFF;
}
.btn-red i{color:#fff;}
i.icon-green{color:#339900;}
i.icon-red{color:#d81e05;}
.btn i{    padding-right:.2em;display:inline-block;}



@-webkit-keyframes rotate-icon {  
    0% { -webkit-transform: rotate(0deg); }  
    100% { -webkit-transform: rotate(360deg); }  
}  
.spin{
  -webkit-animation: rotate-icon 1s infinite linear;  
    -moz-animation: rotate-icon 1s infinite linear;  
 }