JSFiddle - React, Tailwind, and code Playground

HTML

<div class="radios">
    <label>Tutorial
        <input style="width: 20px;" id="tuto" type="radio" name="categoria" required />
        <span></span>
    </label>
    <label>
        <input style="width: 20px;" id="guia" type="radio" name="categoria" required />GuĂ­a
    </label>
</div>

CSS

body{ background: black;}

.radios{
    width: 90%;
    margin: 10px;
    padding: 5px;
    border: 2px solid teal;
    border-radius: 15px;
    background: black;
    color: gray;
    font-family: arial;
    -webkit-transition: box-shadow .2s, color .2s, border .2s, border-radius .2s, width .2s;
    -moz-transition: box-shadow .2s, color .2s, border .2s, border-radius .2s;
    outline: none;
}

.radios:hover{
    box-shadow: 0 0 5px 2px white;
    border:2px solid white;
}
.radios input{
   display:none;
}
.radios input:checked{
    content: "holy shit";
}

.libelulas{color: red; text-shadow: 2px 2px 4px red, -2px -2px 6px red;}

JavaScript

$(document).ready(function(){ 
$("input[type=radio]").change(function(){
    $("input[type=radio]:not(:checked)").parent().removeClass('libelulas');
    $(this).parent().addClass('libelulas');
}); 
});