JSFiddle - React, Tailwind, and code Playground

by stot

HTML

<h3>Page Background Image
<a href="http://opengameart.org/sites/default/files/styles/medium/public/361-0.png" target="_blank">Link</a>
</h3>    
    
<h3>Text Buttons <a href="http://us.battle.net/hearthstone/static/images/buttons/button1-top-sub.png" target="_blank">Link</a></h3>

<a class="ui-button beta-button--sub beta-button" href="#">
    <span class="button-content">Loooooooong button</span>
</a>

<a class="ui-button beta-button--sub beta-button" href="#">
    <span class="button-content">PLAY</span>
</a>


<h3>Icon Buttons <a href="http://bnetcmsus-a.akamaihd.net/cms/forum_icon/OBUGY5VQ1O141288056008758.gif" target="_blank">Link</a></h3>
<img src="http://bnetcmsus-a.akamaihd.net/cms/forum_icon/OBUGY5VQ1O141288056008758.gif">

<h3>Borders <a href="http://us.battle.net/hearthstone/static/images/game-guide/heroes/artwork-frameV2.png" target="_blank">Link</a></h3>

<div class="border2 bluebg">dialog with content before border</div>
<br />
<div style="position:relative">
    <div class="border bluebg">
        <h1>Dialog</h1>dialog with content behind border<br />some more content</div>
</div>

    
    
    <img src="http://local.playa.cc/pic/Long_Button01.png" />

CSS

@import url(http://fonts.googleapis.com/css?family=Carter+One);


body {
    background:#000 url('http://opengameart.org/sites/default/files/styles/medium/public/361-0.png') repeat 0 0;
    background-size:cover;
    color:white;
}

a {
    color: white;
    font-size:smaller;
}

.ui-button span, .ui-cancel span {
    background-repeat: no-repeat;
    display: inline-block;
    outline: 0 none;
}

.ui-button, .ui-cancel {
    background: none repeat scroll 0 center rgba(0, 0, 0, 0);
    border: 0 none;
    cursor: pointer;
    display: inline-block;
    height: auto;
    margin: 0;
    outline: 0 none;
    overflow: visible;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.beta-button--sub {
    background: url("http://local.playa.cc/pic/Long_Button01.png") no-repeat scroll 100% -70px transparent;
    bottom: 13px;
    display: inline-block;
    height: 72px;
    margin-left: 30px;
    margin-top: -1rem;
    padding-right: 50px;
    position: relative;
    z-index: 10;
}
.beta-button--sub {
    height: 78px;
    margin-top: 0;
}
.beta-button--sub:hover {
    //background-position: 100% -237px;
}
.beta-button--sub:hover .button-content {
    //background-position: 0 -84px;
}
.beta-button--sub .button-content {
        background-image: url("http://local.playa.cc/pic/Long_Button01.png");
    padding-left: 50px;
    font-size: 22px;
    line-height: 86px;
    min-width: 150px;
    margin-left: -30px;
    height: 72px;
    z-index: 2;
}
.button-content {
    color: #fff;
    font-family: 'Carter One';
    text-shadow: 0 0 4px #000, 0 0 8px #000;
    overflow: hidden;
    text-transform: uppercase;
}
.border:before {
    //padding:15px;
    content:"";
    position:absolute;
    //border:100px solid red;
      border-image-slice: 18 18 18 18 fill;
border-image-width: 18px 18px 18px 18px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch; 
    border-image-source:...