JSFiddle - React, Tailwind, and code Playground

HTML

<div class="msg">
<p class="msg-logo">Как вы о нас узнали?</p>
<ul class="msg-radio">
    <li><label><input type="radio" name="pos1"> Рассказали друзья</label></li>
<li><label><input type="radio" name="pos1"> Нашел в интернете</label></li>
<li><label><input type="radio" name="pos1"> Увидел рекламу</label></li>
<li><label><input type="radio" name="pos1"> Мой вариант</label></li>
<li style="display: none;"><input type="text" name="txt1" class="msg-intext"></li>
</ul>
<div class="msg-ok">Окей</div>
</div>

CSS

.msg {
padding-bottom: 40px;
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
background: #fff;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
}

.msg-logo {
font-size: 18px;
margin-top: 5px;
text-align: center;
}

.msg-radio {
list-style-type: none;
padding: 0px;
margin-left: 10px;
margin-right: 10px;
width: 100%;
}

.msg-radio li {
cursor: pointer;
}

.msg-intext {
width: 262px;
height: 25px;
margin-top: 5px;
margin-left: 18px;
margin-bottom: 5px;
border: 1px solid #aaa;
background: #eee;
font-size: 16px;
}

.msg-ok {
border-radius: 5px;
background: #777;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 14px;
color: #fff;
cursor: pointer;
}

.msg-ok:hover {
background: #555;
}

li.active {
     font-family: Arial, Sans-Serif ;
    color: #124112;
}

JavaScript

var oldRadio;
$( document ).on( "change", 'input[name=pos1]', function(event) {
    if(oldRadio)oldRadio.closest('li').removeClass('active');
    oldRadio=$(this);
    oldRadio.closest('li').addClass('active');
});