JSFiddle - React, Tailwind, and code Playground

by Luis Felipe Morais

HTML

<div class="banners">
    <input type="radio" name="aa" id="a1" checked />
    <p>ullam sed ducimus stiae praesentium quibusdam dignissimos nulla. Cum omnis?</p>
    <input type="radio" name="aa" id="a2"/>
    <p>sit officiis distinctio tempora sequi molestiae praesentium quibusdam dignissimos nulla. Cum omnis?</p>
    <input type="radio" name="aa" id="a3"/>
    <p>debitis sit officiis distinctio tempora sequi molestiae praesentium quibusdam dignissimos nulla. Cum omnis?</p>
     <input type="radio" name="aa" id="a4"/>
    <p>odio amet ea error debitis sit officiis distinctio tempora sequi molestiae praesentium quibusdam dignissimos nulla. Cum omnis?</p>
     <input type="radio" name="aa" id="a5"/>
    <p>error debitis sit officiis distinctio tempora sequi molestiae praesentium quibusdam dignissimos nulla. Cum omnis?</p>
</div>
<ul>
    <li><label for="a1">1</label></li>
    <li><label for="a2">2</label></li>
    <li><label for="a3">3</label></li>
    <li><label for="a4">4</label></li>
    <li><label for="a5">5</label></li>
</ul>

CSS

.banners input{
    position:absolute;
    visibility:hidden;
}
.banners input+p{display:none;}
.banners input:checked+p{display:block;}
label{
    cursor:pointer;
    color: red;
}