JSFiddle - React, Tailwind, and code Playground

by Matt Anderson

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:400,300,500,300italic,400italic,500italic,700,700italic,900,900italic|Roboto+Condensed:400,700,300|Droid+Sans:400,700"></script>
<link rel="stylesheet" href="http://dev.fusiontracker.com:9000/bower_components/bootstrap-sass/bootstrap-2.3.2.css">
<div class = "modalOverlay">
    <div class = "modalContainer">
        <div class = "top">
            <h2>Modal Title</h2>
        </div>
        <div class = "content">
            content contenc content youre a whore fuck your mum
        </div>
        <div class = "bottom">
            <button class = "btn btn-primary">wat</button>
        </div>
    </div>
</div>

CSS

/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
  width: 6px; /* 1px wider than Lion. */
  /* This is more usable for users trying to click it. */
  background-color: rgba(0,0,0,0);
  -webkit-border-radius: 100px;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}
 
/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
  /* This is the EXACT color of Mac OS scrollbars. 
     Yes, I pulled out digital color meter */
  background: rgba(0,0,0,0.5);
  -webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}

* {
    font-family: "Roboto";
}

.modalOverlay {
    position: fixed;
    z-index: 150;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);
}

.modalContainer {
    top: 0; left: 0; right: 0; bottom: 0;
    position: absolute;
    margin: auto;
    height: 90%;
    width: 500px;
    border: 1px solid #ddd;
    border-radius: 3px;
    
    background: #fefefe;
    box-shadow: 0 0 15px rgba(0,0,0,0.125)
    
    
}

.modalContainer .top,
.modalContainer .bottom {
    background: #f1f1f1;
    position: absolute;
    left: 0;
    right: 0;
    line-height: 50px;
    padding: 0 15px;
    height: 50px;
}

.modalContainer .top {
    top: 0;
    max-height: 50px;
    overflow: hidden;
    border-bottom: 1px solid #e5e5e5;
}

.modalContainer .top > * {
    padding: 0;
    margin: 0;
}

.modalContainer > * > * {
    line-height: inherit;
}

.modalContainer .top h2 {
    font-size: 26px;
    font-weight: 300;
    line-height: inherit;
}

.modalContainer .content {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
    padding: 15px;
    overflow: auto;
}

.modalContainer .bottom {
    bottom: 0;
    border-top: 1px solid #e5e5e5;
}