JSFiddle - React, Tailwind, and code Playground

by adamschwartz

CSS

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<style>
.vex-theme-two-by-two-panel .vex-content {
    background: transparent;
    position: absolute;
    top: 1em;
    right: 1em;
    bottom: 1em;
    left: 1em;
}

.vex-theme-two-by-two-panel .vex-close {
    position: absolute;
    cursor: pointer;
}

.vex-theme-two-by-two-panel .vex-panel {
    position: absolute;
    height: 50%;
    width: 50%;
    box-sizing: border-box;
    padding: 1em;
}

.vex-theme-two-by-two-panel .vex-panel-content {
    background: #fff;
    height: 100%;
    padding: 1em;
    box-sizing: border-box;
    border-radius: .3125em;
}

.vex-theme-two-by-two-panel .vex-panel:nth-child(1) {
    top: 0;
    left: 0;
}

.vex-theme-two-by-two-panel .vex-panel:nth-child(2) {
    top: 0;
    left: 50%;
}

.vex-theme-two-by-two-panel .vex-panel:nth-child(3) {
    top: 50%;
    left: 0;
}

.vex-theme-two-by-two-panel .vex-panel:nth-child(4) {
    top: 50%;
    left: 50%;
}

CoffeeScript

vex.open
    className: 'vex-theme-two-by-two-panel'
    content: '''
        <div class="vex-panel">
          <div class="vex-panel-content">
            One
          </div>
        </div>
        <div class="vex-panel">
          <div class="vex-panel-content">
            Two
          </div>
        </div>
        <div class="vex-panel">
          <div class="vex-panel-content">
            Three
          </div>
        </div>
        <div class="vex-panel">
          <div class="vex-panel-content">
            Four
          </div>
        </div>
    '''