JSFiddle - React, Tailwind, and code Playground

by Serhio Magpie

HTML

<div class="modal">
    <div class="modal-window">
        <p>
            <img src="http://habrastorage.org/files/50f/7b2/1cc/50f7b21ccabd4b20bc0369f228138b5b.jpg" alt=""/>
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat lorem sit amet tellus feugiat, in convallis dui volutpat. Aenean fermentum ullamcorper lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu mauris nisi. Vivamus et erat volutpat, auctor justo malesuada, rhoncus elit. Proin finibus mollis nulla vitae convallis. Fusce commodo diam nec quam convallis elementum. Integer a hendrerit eros, et porta mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sagittis viverra ligula, vitae imperdiet risus rhoncus vel. Nam ullamcorper congue erat eu aliquam.</p>
    </div>
</div>

SCSS

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

p {
    margin: 0 0 18px;
    
    &:last-child {
        margin: 0;
    }
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 24px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center; 
    overflow: hidden;
    background-color: rgba(0,0,0,0.5);
}

.modal-window {
    width: 700px;
    max-width: 100%;
    max-height: 100%;
    padding: 24px;
    overflow: auto;
    background: #ffffff;
}