JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<div id="controls_container">
        <a href="#" class="a_demo_two" onclick="reset_function()">Increase Bet</a>
    </div>

    <div id='test'></div>

CSS

.a_demo_two {
            display: inline-block;
            width: 50px;
            margin: 10px;
            background-color:#6fba26;
            padding:10px;
            position:relative;
            font-family: 'ChunkFiveRegular';
            text-align: center;
            font-size:12px;
            text-decoration:none;
            color:#fff;
            background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
            box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
            border-radius: 5px;
        }

        .a_demo_two:active {
            top:7px;
            background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
            box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
            color: #156785;
            text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
            background: rgb(44,160,202);
        }

        .a_demo_two::before {
            background-color:#072239;
            content:"";
            display:block;
            position:absolute;
            width:100%;
            height:100%;
            padding-left:2px;
            padding-right:2px;
            padding-bottom:4px;
            left:-2px;
            top:5px;
            z-index:-1;
            border-radius: 6px;
            box-shadow: 0px 1px 0px #fff;
        }

        .a_demo_two:active::before {
            top:-2px;
        }

JavaScript

var bet = 0;
        function reset_function() {
            bet++;
            document.getElementById('test').innerHTML= bet;
        }