JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div class="container" id="myModal">
    <!-- Modal -->
    <div class="modal fade" id="LetterFromCommissioner" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width:900px;">
            <div class="modal-content">
               <div class="modal-header" style="padding-bottom: 0; border-bottom: none;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" title="Close">&times;</span>
                    </button>
                     <h4 class="modal-title" id="myModalLabel">&nbsp;</h4>
                </div>
                <div class="modal-body" style="padding-top: 0;">
                    <div class="paper letter-head">
                        <div class="commissioner-picture"></div>
                        <p>
                            Howdy, neighbors! Welcome to the Texas Department of Agriculture. I&rsquo;m Sid Miller, the 12<sup>th</sup> Commissioner of Agriculture for the great state of Texas. It is a tremendous honor and true pleasure to serve Texas farmers, ranchers and all citizens as your Agriculture Commissioner. As I take office for my first term, I want you to know that I&rsquo;m here to serve you as a good steward of our land and resources.
                        </p>
                        <p>
                            Over the next four years, my team and I will work hard on issues important to Texas families and the agriculture industry as a whole, including developing water resources to secure our future success; tackling rural unemployment and bolstering job creation; promoting Texas businesses through GO TEXAN; and securing the porous U.S./Mexico border to protect our state and nation.
                        </p>
                        <p>
                            Agriculture is a $100 billion industry in Texas. It&rsquo;s important we work together to continue to grow this vital...

CSS

@import url(http://fonts.googleapis.com/css?family=EB+Garamond);
.paper {
	position: relative;
	margin: 0 auto;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.paper:before,
.paper:after {
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
}
.paper:after {
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}

.letter-head p { margin: 18px 0; }

.letter-head p:first-of-type,
.letter-head p:last-of-type {
    margin-top: 0;
}

.letter-head {
	font-family: 'EB Garamond', Garamond, Georgia, serif;
    font-size: 14px;
	text-align: justify;
	width: 816px; /* 8.5in @ 96dpi */
    height: 880px; /* 11in @ 96dpi */
	padding: 216px 96px 60px;
    background-size: contain;
    background-image: url('http://i.imgur.com/mDMWkUX.png'); /* Deletion link http://imgur.com/delete/wnh3d7HspTfYtrN */
}
.commissioner-signature {
	margin-left: -55px;
    margin-top: -10px;
    width: 319px;
	height: 45px;
    background-repeat: no-repeat;
    background-size: auto 45px;
	background-image:...

JavaScript

$(document).ready(function() {
    // Keep a reference to the original version of jQuery.
var regularVersionOfjQuery = jQuery;
    // Load a newer version of jQuery so we can use the Bootstrap Modal code.
 $.ajax({
  url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js',
  dataType: 'script',
     success: function() {
         wireUpBootstrapModaljQueryPlugin();
         $('#LetterFromCommissioner').modal('show');
         // Restore jQuery back to the previous version so we don't break teh rest of the stuff on the page.
         $ = jQuery = regularVersionOfjQuery;
     }
    });
});

function wireUpBootstrapModaljQueryPlugin() {
    // https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js
    
    if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(t){var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1==e[0]&&9==e[1]&&e[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function(t){"use strict";function e(e,o){return this.each(function(){var s=t(this),n=s.data("bs.modal"),r=t.extend({},i.DEFAULTS,s.data(),"object"==typeof e&&e);n||s.data("bs.modal",n=new i(this,r)),"string"==typeof e?n[e](o):r.show&&n.show(o)})}var i=function(e,i){this.options=i,this.$body=t(document.body),this.$element=t(e),this.$backdrop=this.isShown=null,this.scrollbarWidth=0,this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,t.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};i.VERSION="3.3.1",i.TRANSITION_DURATION=300,i.BACKDROP_TRANSITION_DURATION=150,i.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},i.prototype.toggle=function(t){return this.isShown?this.hide():this.show(t)},i.prototype.show=function(e){var...