JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<div class="modal">
    <div class="modal-header">Header</div>
    <div class="modal-body">
        Esse labore hella post-ironic. Commodo ullamco PBR keffiyeh, Schlitz authentic food truck selvage nesciunt nihil next level ethical meggings aliqua. Photo booth dolore food truck, next level cornhole meggings pour-over esse letterpress forage actually 3 wolf moon. Tousled labore butcher magna, tempor hoodie bicycle rights stumptown twee PBR esse tote bag cupidatat sunt. Narwhal kitsch ullamco keffiyeh, accusamus umami pitchfork. Try-hard bitters you probably haven't heard of them, whatever next level brunch literally adipisicing pariatur labore freegan veniam ugh. Eu eiusmod aliqua, nostrud lo-fi selfies Carles raw denim wolf commodo ethnic pickled forage pitchfork enim.
        Esse labore hella post-ironic. Commodo ullamco PBR keffiyeh, Schlitz authentic food truck selvage nesciunt nihil next level ethical meggings aliqua. Photo booth dolore food truck, next level cornhole meggings pour-over esse letterpress forage actually 3 wolf moon. Tousled labore butcher magna, tempor hoodie bicycle rights stumptown twee PBR esse tote bag cupidatat sunt. Narwhal kitsch ullamco keffiyeh, accusamus umami pitchfork. Try-hard bitters you probably haven't heard of them, whatever next level brunch literally adipisicing pariatur labore freegan veniam ugh. Eu eiusmod aliqua, nostrud lo-fi selfies Carles raw denim wolf commodo ethnic pickled forage pitchfork enim.
        Esse labore hella post-ironic. Commodo ullamco PBR keffiyeh, Schlitz authentic food truck selvage nesciunt nihil next level ethical meggings aliqua. Photo booth dolore food truck, next level cornhole meggings pour-over esse letterpress forage actually 3 wolf moon. Tousled labore butcher magna, tempor hoodie bicycle rights stumptown twee PBR esse tote bag cupidatat sunt. Narwhal kitsch ullamco keffiyeh, accusamus umami pitchfork. Try-hard bitters you probably haven't heard of them, whatever next level brunch...

CSS

* {
    font-family:Arial, sans-serif;
    font-size:12px;
}

.modal {
    border:1px solid red;
    width:600px;
    position:absolute;
    top:50%;
    left:50%;
    min-height:200px;
}

.modal-header, .modal-body, .modal-footer {
    padding:10px;
    height:25%;
    box-sizing: border-box
}

.modal-header, .modal-footer {
    background:#ccc;
    font-weight:bold;
    font-size:14px;
  
}

.modal-body {
    height:inherit;
    padding:1px;
    overflow:auto;
    line-height:1.75em;
}

JavaScript

$(function() {
    $('.modal').css('height','50%');
    $('.modal').css( {
        'margin-top': (-1*$('.modal').height()/2),
        'margin-left': (-1*$('.modal').width()/2)
    })
});

$(window).resize(function() {
    $('.modal').css( {
        'margin-top': (-1*$('.modal').height()/2),
        'margin-left': (-1*$('.modal').width()/2)
    })
});