JSFiddle - React, Tailwind, and code Playground

by path411

HTML

<div>
    <input type="radio" 
        id="auction-action-buy" 
        name="auction-action" 
        class="auction-action" 
        value="buy" 
        checked="checked"/>
    <label class="auction-action-label" 
        for="auction-action-buy">Buy</label>
</div>

<div>
    <input type="radio" 
        id="auction-action-sell" 
        name="auction-action" 
        class="auction-action" 
        value="sell" />
    <label class="auction-action-label" 
        for="auction-action-sell">Sell</label>
</div>

CSS

.auction-action {
    display:none;
}

.auction-action-label {
    padding: 5px;
    background-color:grey;
    color: white;
    cursor: pointer;
    display:inline-block;
    width:25px;
    
   
    
}

#auction-action-buy:checked+label {
    background-color:green;
}

#auction-action-sell:checked+label {
    background-color:red;
}