JSFiddle - React, Tailwind, and code Playground

by Matt Anderson

HTML

<div class = "modal">
    <div class = "container">
        <div class = "heading"><h3>test title</h3></div>
        <div class = "content">fuck your mother</div>
        <div class = "buttons">
            skeet skeet
        </div>
    </div>
</div>


<div class = "test"></div>

CSS

.modal {
    z-index: 99 !important;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.125);
    width: 100%;
    height: 100%;
    font-family: "Roboto";
}

.modal .container {
    margin: 15px auto;
    background: #fff;
    max-height: 95%;
    max-width: 95%;
    min-width: 500px;
    width: 500px;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
}

.modal .heading,
.modal .buttons{
    background: #fafafa;
    padding: 10px 15px;
}

.modal .heading {
    border-bottom: 1px solid #ddd;
}

.modal .buttons {
    border-top: 1px solid #ddd;
}

.modal .heading h3 {
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-family: "Roboto";
    font-weight: 300;
}

.modal .content {
    padding: 15px;
    font-size: 14px;
}

JavaScript

WebFontConfig = {
    google: { families: [ 'Roboto:400,300,500:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();