JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<form action="#" method="post">
    <input type="radio" name="pay" id="pay-1" />
    <label for="pay-1">payment 1</label>
    
    <input type="radio" name="pay" id="pay-2" />
    <label for="pay-2">payment 2</label>
    
    <input type="radio" name="pay" id="pay-3" />
    <label for="pay-3">payment 3</label>
    
    <button type="submit">Send</button>
</form>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

form{
    font-family: 'Segoe UI', sans-serif;
    max-width: 300px;
    margin: 25px auto;
    border: 1px solid #DCDCDC;
    padding: 15px 20px;
}

[id^="pay-"]{
    display: none;
}
[id^="pay-"] + label{
    background: #fff;
    margin: 10px 0;
    text-align: center;    
    padding: 5px 10px;
    display: block;
    border: 1px solid #DCDCDC;
    border-radius: 5px;    
    cursor: pointer;
}
[id^="pay-"]:checked + label{
    background: #f00;
    color: #fff;
}

button{
    display: block;
    width: 100%;
}