JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<input type="checkbox" id="comparechk" class="chkhidden">
                <input type="checkbox" id="editchk" class="chkhidden">
                <input type="checkbox" id="multiplechk" class="chkhidden">

                <label for="comparechk" id="comparebtn" class="viewbutton"></label>
                <label for="editchk" id="editbtn" class="viewbutton"></label>
                <label for="multiplechk" id="multiplebtn" class="viewbutton"></label>

CSS

.viewbutton {
            height: 48px;
            width: 48px;
            background-color: #FFFFFF;
            border-radius: 50%;
            margin: 0px 4px;
            border: 0px;
            border: 1px solid #CDCDCD;
            cursor: pointer;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 24px;
            position: relative;
            display: inline-block;
        }    
        
        #comparechk:checked ~ #comparebtn,
        #editchk:checked ~ #editbtn,
        #multiplechk:checked ~ #multiplebtn {
            background-color: #005EFF;
            outline: none;
        }