JSFiddle - React, Tailwind, and code Playground

HTML

<div class="msg">
<p class="msg-logo">Как вы о нас узнали?</p>
<ul class="msg-radio">
<li><input type="radio" name="pos1"> Рассказали друзья</li>
<li><input type="radio" name="pos1"> Нашел в интернете</li>
<li><input type="radio" name="pos1"> Увидел рекламу</li>
<li><input type="radio" name="pos1"> Мой вариант</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;
}