JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html>
     <head>
         <title>Inline Options</title>
         <style>
             ul {
                 list-style:none;overflow:hidden;
             }
             ul li {
                 lit-style:none;
                 float:left;
                 position:relative;
             }
             ul li input[type="checkbox"] {
                 position:absolute;
                 top:0;
                 right:0;
                 bottom:0;
                 left:0;
                 width:100%;
                 height:100%;
                 opacity:0;
             }
             ul li input:checked + label {
                 background:blue;
             }
         </style>
     </head>
     <body>
         <form action="#" method="get">
             <ul>
                 <li>
                     <input type="checkbox" name="aryHours[]" id="checkbox1" />                 <label for="checkbox1" class="">Option 1</label>
                 </li>
                 <li>
                     <input type="checkbox" name="aryHours[]" id="checkbox2" />                 <label for="checkbox2" class="">Option 2</label>
                 </li>
                 <li>
                     <input type="checkbox" name="aryHours[]" id="checkbox3" />                 <label for="checkbox3" class="">Option 3</label>
                 </li>
             </ul>
         </form>
     </body>
    </html>