JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<form class="poll">

<p>What?</p>

<input type="radio" name="group1" value="1" id="q1_a1" >
<label for="q1_a1">This is some very long text... hello world!</label>


<input type="radio" name="group1" value="2" id="q1_a2">
<label for="q1_a2">a2</label>


<input type="radio" name="group1" value="3" id="q1_a3">
<label for="q1_a3">a3</label>


<input type="radio" name="group1" value="4" id="q1_a4">
<label for="q1_a4">a4</label>

</form>

CSS

body {font-family:arial;}


.poll input[type="radio"] {display:none;}
.poll label {display:block;border:solid;border-width:1px 1px 1px 3px;border-color:#bbbbbb #bbbbbb #bbbbbb #0074D9;padding:5px 7px;margin:0 0 15px 0;font-size:16px;line-height:20px;}
.poll input[type="radio"]:checked + label {background-color:#E6F3FF;}