JSFiddle - React, Tailwind, and code Playground

by annam

HTML

<h2>Q1</h2>
<div>
    <input type="radio" name="q1" value="q1-a1" id="q1-a1" />
    <label for="q1-a1">Q1-A1</label>
</div>
<div>
    <input type="radio" name="q1" value="q1-a2" id="q1-a2" />
    <label for="q1-a2">Q1-A2</label>
</div>
<div>
    <input type="radio" name="q1" value="q1-a3" id="q1-a3" />
    <label for="q1-a3">Q1-A3</label>
</div>

CSS

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

body { font-family: sans-serif; }
h2 { font-size: 125%; font-weight: bold; }

label { display: block; }
label:hover { background-color: yellow; }
input:checked ~ label { background-color: green; }