JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/eggplant/jquery-ui.css">
<input type="checkbox" id="check" /><label for="check">Select</label>

CSS

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

.ui-button {width:163px; height:36px; border:0; -webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;box-shadow:2px 2px 2px #ccc; color:#fff; font-size:25px; font-weight:bold; letter-spacing:1px; line-height:0; font-family:impact; text-shadow: 2px 2px 2px #1F1F1F;}
span.ui-button-text {padding:1px 0 !important; }
.ui-state-default {background-color:#d9777c;

background-image: -moz-linear-gradient(90deg, #d9777c, #ed1c24 33px);

background-image: -webkit-linear-gradient(90deg, #d9777c, #ed1c24 33px);

background-image: -o-linear-gradient(90deg, #d9777c, #ed1c24 33px);

background-image: -ms-linear-gradient(90deg, #d9777c, #ed1c24 33px);

background-image: linear-gradient(90deg, #d9777c, #ed1c24 33px)}
.ui-state-hover {background-color:#355c0e;

background-image: -moz-linear-gradient(90deg, #355c0e, #ed1c24 33px);

background-image: -webkit-linear-gradient(90deg, #355c0e, #ed1c24 33px);

background-image: -o-linear-gradient(90deg, #355c0e, #ed1c24 33px);

background-image: -ms-linear-gradient(90deg, #355c0e, #ed1c24 33px);

background-image: linear-gradient(90deg, #355c0e, #ed1c24 33px)}
.ui-state-active {background-color:#355c0e;

background-image: -moz-linear-gradient(90deg, #355c0e, #247052 33px);

background-image: -webkit-linear-gradient(90deg, #355c0e, #247052 33px);

background-image: -o-linear-gradient(90deg, #355c0e, #247052 33px);

background-image: -ms-linear-gradient(90deg, #355c0e, #247052 33px);

background-image: linear-gradient(90deg, #355c0e, #247052 33px)}

JavaScript

$(function() {
        $( "#check" ).button();
   
    });