JSFiddle - React, Tailwind, and code Playground

by Olga Zhizhka

HTML

<div class="themodal-overlay">
    <div class="modal">
        <p>Maecenas sollicitudin feugiat urna. Maecenas tellus. Vestibulum semper, lacus in blandit blandit, neque lectus ullamcorper nulla, at viverra elit justo ac lacus. Proin gravida enim non neque ultricies dictum. In vulputate mattis lacus. In mollis nibh a lacus. 

            Curabitur placerat. Nam eros dui, semper vitae, tincidunt quis, tincidunt eu, risus. Ut in pede a neque condimentum feugiat. Maecenas dictum tortor non neque.</p>
    </div>
</div>

CSS

.themodal-overlay {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1250;
    background-color: rgba(0,0,0,0.75);
    cursor: pointer;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.themodal-overlay > * {
	-webkit-transform: translateZ(0px);
} 
.modal {
   width: 274px;
   background: #fff;
   padding: 10px;
    /* display: none; */
    position: relative;
    z-index: 1300;
    -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}