JSFiddle - React, Tailwind, and code Playground

by Louis Walch

HTML

<form action="#" method="post">

<ul>
  <li>
    <label for="foo">
      <input class="radio" type="radio" value="1" name="testing" checked />
      <span>1</span>
    </label>    
  </li>
  <li>
    <label for="foo">
      <input class="radio" type="radio" value="2" name="testing" checked />
      <span>2</span>
    </label>
  </li>
  <li>
    <label for="foo">
      <input class="radio" type="radio" value="2" name="testing" checked />
      <span>3</span>
    </label>
  </li>
  <li>
    <label for="foo">
      <input class="radio" type="radio" value="4" name="testing" checked />
      <span>4</span>
    </label>    
  </li>

</ul>

</form>

CSS

/* Ignore: Reset */

HTML, BODY {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
* { padding: 0; margin: 0;}


/* The actual CSS */

BODY {
  background-color: white;
  padding: 10px;
}

UL {
  list-style: none;
  position: relative;
}

LI {
  list-style-type: none; 
  width: 33.3%;
  float: left;
  padding-right: 5px;
  padding-bottom: 5px;
  position: relative;
}

INPUT[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
} 

SPAN {
  border: 2px solid #ccc;
  display: block;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

INPUT[type="radio"]:hover + SPAN {
  border-color: #999;
}

INPUT[type="radio"]:checked + SPAN {
  border-color: red;
}