JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<form>
  <div class="quest">
    <input type="radio" name="test" class="rd" id="test"/>
    <label for="test"><span class="rd">test</span></label>
  </div>
</form>

CSS

.quest {
  padding: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  margin-bottom: 7px;
  position: relative;
  overflow: hidden;
}

.quest:hover {
  padding: 5px;
  background-color: #ddffff;
  cursor: pointer;
  margin-bottom: 7px;
}

.quest:active {
  padding: 5px;
  background-color: #fef9a5;
  cursor: pointer;
  margin-bottom: 7px;
}

.rd {
  cursor: pointer;
  display: inline-block;
  position: relative;
  z-index: 1;
}

label {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 30px 0;
}

.rd:checked + label {
  background-color: #fef9a5;
  cursor: pointer;
}