JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <input type='radio' value='1' name='radio' id='radio1'/>
        <label for='radio1'>Value 1</label>
    </li>
    <li>
        <input type='checkbox' value='2' name='radio'  id='radio2'/>
        <label for='radio2'>Value 2</label>
    </li>
    <li>
        <input type='radio' value='3' name='radio'  id='radio3'/>
        <label for='radio3'>Value 3</label>
    </li>
</ul>

CSS

ul {
    list-style: none;
    padding: 0;
    overflow: hidden;
}
li {
    float: left;
    width: 100px;
    position: relative;
    height: 100px;
}
input {
    visibility:hidden;
}
label {
    cursor: pointer;
}
input + label{
  position: absolute;
  bottom: 0;
}
input + label:before {
    background: #fff000;
    position: absolute;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    line-height: 70px;
    bottom: 25px;
    left: 50%;
    display: block;
    content: '';
    text-align: center;
    margin-left: -35px;
}
input:checked + label:before {    
    content: 'TICK';    
}