JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<div id="green">
    <fieldset id="costs">
        <legend>Costs: </legend>
        <input id="free" name="costs" type="radio" value="free" />
        <label class="costs" for="free">Free</label>
        
        <input id="chargeable" name="costs" type="radio" value="chargeable" />
        <label class="costs" for="chargeable">Chargeable</label>
        
        <input id="mixed" name="costs" type="radio" value="mixed" checked="checked" />
        <label  class="costs" for="mixed">Mixed</label>
    </fieldset>
</div>

CSS

#green{
	background-color: green;
	height: 200px;
}
#costs{
	height:calc(100% - 20px);
}


.costs
{
font-family: Arial, sans-serif;
background-color:#FFBC02;
color:white;
padding: 5px 12px;
margin-left:5px;
font-size: 1.05em;
}

input[type=radio]
{
display:none;
}



input[type=radio]:checked + label 
{
background-color:lightgreen;
}