JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<br/><br/><br/><br/><br/><center>Do I shift? ...</center><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>

<!-- Force 3d acceleration always and forever :) -->
<div style="-webkit-transform: translateZ(0)"></div>

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" />
<link href="http://github.hubspot.com/vex/css/vex-theme-os.css" rel="stylesheet" />
<style>
body {
    font-family: "Helvetica Neue", sans-serif;
    margin: 0
}
.wrap {
    background: #eee;
}

JavaScript

vex.defaultOptions.className = 'vex-theme-os';

var getScrollbarWidth = function() {
    var scrollbarWidth, $scrollDiv = $('<div style="width: 100px; height: 100px; overflow: scroll; position: absolute; left: -99999px;"></div>');
    $('body').append($scrollDiv);
    scrollbarWidth = 15 || ($scrollDiv[0].offsetWidth - $scrollDiv[0].clientWidth);
    $scrollDiv.remove();
    return scrollbarWidth;
};

$('body').append('<style>html body.vex-open { padding-right: ' + getScrollbarWidth() + 'px; }</style>');

setTimeout(function(){
    vex.dialog.alert('Message');
}, 100);