JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<fieldset>
  <legend>
    Radio options
  </legend>


    <input name="radio" type="radio" id="1" value="1" />
    <label for="1" class="fa fa-meteor">

      <img src="" />

      <p>1</p>
    </label>





    <input name="radio" type="radio" id="2" value="2" />
    <label for="2" class="fa fa-table">

      <img src="" />

      <p>2</p>
    </label>


</fieldset>

CSS

div {
  


  padding: 1em;
}

label {
  cursor: pointer;
  border: 1px solid gray;
  overflow: hidden;
  display: block;
}

label > p { font-weight: normal; }


img {
  display: inline-block;
  width: 40px;
  height: 50px;
  background: red;
  border: 1px solid red;
  cursor: pointer;

}

input[type="radio"]:checked+label {
  border-color: blue;
}