JSFiddle - React, Tailwind, and code Playground

by Mahmoud Saeed

HTML

<form>
    <input type="radio" name="action" value="green" /> Green
    <input type="radio" name="action" value="red" /> Red
    <div id="green" class="show-hide">I am the green div.</div>
    <div id="red" class="show-hide">I am the red div.</div>
</form>

CSS

#green {
    display: none;
    padding: 10px;
    background-color: #6f6;
}

#red {
    display: none;
    padding: 10px;
    background-color: #f44;
}

input[value="green"]:checked ~ #green {
    display: block;
}

input[value="red"]:checked ~ #red {
    display: block;
}