JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<div style="display: block;" id="myModal" class="modal hide fade in">
              <a class="close">&nbsp;×&nbsp;</a>
              <h1>Я злобная форма</h1>
            <div class="modal-body">
              <h4>Заполняем форму</h4>
                <form action="http://yandex.ru" method="post">
        <label> Имя <input type="text" name="name"></label>
        <label> Фамилия <input type="text" name="lastname"></label>
        <label> Отчество  <input type="text" name="middlename"></label>
        <label> Возраст <input type="text" class="span1" name="age"></label>
        <label> Телефон <input type="text" name="phone"></label>
        <input type="submit" class="btn btn-primary"><br>
                </form>

</div>
</div>
<div class="mask"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

.mask {
    opacity: 0.8;
    background-color: #000000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
}
.modal {
    display: block;
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    left: 50%;
    margin: 10px 0 0 -280px;
    overflow: auto;
    position: fixed;
    width: 560px;
    z-index: 1050;
    padding:20px;
}
.modal .close {
    float:right;
    font-size:2em;
    cursor: pointer;
    background:red;
}
.modal h1 {
    float:left;
    font-size:2em;
}