JSFiddle - React, Tailwind, and code Playground

HTML

<!-- вызов модальных окон через ссылки -->
 <a href="#win1" class="button button-green">Подробнее</a>
 <a href="#win2" class="button button-red">Подробнее</a>
 <a href="#win3" class="button button-blue">Подробнее</a>

<!-- окно №1 -->
<a href="#x" class="overlay" id="win1"></a>
<div class="popup">
<h2>Модальное окно №1</h2>
<p>Здесь любое содержание, текст, картинки, видео ...</p>
<a class="close" title="Закрыть" href="#close"></a>
</div>

<!-- окно №2 -->
<a href="#x" class="overlay" id="win2"></a>
<div class="popup">
<h2>Модальное окно №2</h2>
<p>Здесь любое содержание, текст, картинки, видео ...</p>
<a class="close" title="Закрыть" href="#close"></a>
</div>

<!-- окно №3 -->
<a href="#x" class="overlay" id="win3"></a>
<div class="popup">
<h2>Модальное окно №3</h2>
<p>Здесь любое содержание, текст, картинки, видео ...</p>
<a class="close" title="Закрыть" href="#close"></a>
</div>

CSS

.button {
    position: relative;
    display: inline-block;
    margin: 12px;
    padding: 0 20px;
    height: 36px;
    border: 1px solid;
    border-radius: 3px;
    background-clip: padding-box;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
    color: white;
    vertical-align: top;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    line-height: 35px;
    font-family: Verdana, Arial sans-serif;
    cursor: pointer;
}
.button-green {
    border-color: #478228 #478228 #3c6f22;
    background: #5ca934;
    background-image: -webkit-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
    background-image: -moz-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
    background-image: -o-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
    background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f);
}
.button-red {
    border-color: #ae3623 #ae3623 #992f1f;
    background: #d5452f;
    background-image: -webkit-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
    background-image: -moz-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
    background-image: -o-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
    background-image: linear-gradient(to bottom, #da5c48, #d5452f 66%, #c73d28);
}
.button-blue {
    border-color: #0d78b6 #0d78b6 #0b689e;
    background: #1097e6;
    background-image: -webkit-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
    background-image: -moz-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
    background-image: -o-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
   ...