JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div class="select-region">
    <p>Выберите нужный регион:</p>
    <input type="radio" name="region" value="Москва" selected="selected" />
    <label>Москва</label><br/>
    <input type="radio" name="region" value="Краснодар" />
    <label>Ростов-на-Дону</label><br/>
    <input type="radio" name="region" value="Краснодар" />
    <label>Краснодар</label><br/>
    <input type="radio" name="region" value="Краснодар" />
    <label>Ставрополь</label><br/>
    <input type="radio" name="region" value="Москва" />
    <label>Другой</label><br/>
    <div class="select-button">Ок</div>
</div>

CSS

.select-region {
    background-color: #00529b;
    border-radius: 10px;
    left: 3%;
    padding: 18px 20px;
    position: absolute;
    top: 13%;
    width: 180px;
}
.select-region::before {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #00529b;
    content: "";
    height: 0;
    left: 30px;
    position: absolute;
    top: -15px;
    width: 0;
}
.select-region * {
    font-family: Geneva, Arial, Helvetica, sans-serif;
}
.select-region p, .select-region label {
    color: #ffffff;
    font-size: 14px;
}
.select-region p:first-child {
    margin-top: 0;
}
.select-region input[type="radio"] {
    height: 16px;
    margin: 0;
}
.select-region label {
    vertical-align: top;
}
.select-region .select-button {
    background-color: #ffffff;
    border-bottom: 2px solid #003768;
    border-radius: 3px;
    cursor: default;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    margin-top: 15px;
    text-align: center;
    width: 54px;
}