JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<h1 style="margin:0;">New (HTML &amp; CSS):</h1>
<table>
    <tr>
        <td id="topTD">
            <h1 class="commissioner-name">Commissioner Sid Miller</h1>
            <div id='warped'>
                <span class='w0'>T</span>
                <span class='w1'>D</span>
                <span class='w2'>A</span>
                <span class='w3'>&nbsp;</span>
                <span class='w4'>I</span>
                <span class='w5'>n</span>
                <span class='w6'>t</span>
                <span class='w7'>r</span>
                <span class='w8'>a</span>
                <span class='w9'>n</span>
                <span class='w10'>e</span>
                <span class='w11'>t</span>
            </div>
        </td>
    </tr>
</table>

<h1 style="margin-bottom:0">Old (Text embedded in Image):</h1>
<img src="http://intranet.texasagriculture.gov/Portals/_default/Skins/XDC5Tranquility/bg_top_admin.jpg"/>

CSS

@import url(http://fonts.googleapis.com/css?family=Cinzel:bold?text=CommissionerSidMiller);
@import url('http://fonts.googleapis.com/css?family=Droid+Sans:regular');

h1 {
    font-family:'Droid Sans', Sans;
}

#topTD {
    /* This is defined in the DNN skin */
    background-image: url('http://demo.dnnskins.com/Portals/xtranquility/Skins/XDCTranquility/bg_top.jpg');
    height: 269px;
    width: 831px;
    text-align: right;
    padding: 42px 65px 0 48px;
    font-size: 11px;
}
h1.commissioner-name {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    position: absolute;
    margin-top: -135px;
    white-space: nowrap;
    float: left;
    font-size: 1rem;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    color: green;
    padding: 0 3px;
    margin-left: -10px;
}
h1.site-title {
    font-family: 'Cinzel', serif;
    float: left;
    font-size: 1rem;
    color: green;
    padding: 0 3px;
    margin-left: -10px;
    
    position: absolute;
    margin-top: 80px;
    border: 1px solid red;
}

#warped {
    position: absolute !important;
    height: 55px !important;
    width: 200px !important;
    margin-top: 55px;
    margin-left: 10px;
    color: green;
}

/*****************************************
Generated by http://csswarp.eleqtriq.com/
*****************************************/
#warped {
    position: relative;
    display: block;
    width:327px;
    height:94px;
}
#warped>span[class^=w]:nth-of-type(n+0) {
    display:block;
    position:absolute;
    -moz-transform-origin:50% 100%;
    -webkit-transform-origin:50% 100%;
    -o-transform-origin:50% 100%;
    -ms-transform-origin:50% 100%;
    transform-origin:50% 100%;
}
#warped span {
    font-family:'Droid Sans';
    font-size:32px;
    font-weight:regular;
    font-style:normal;
    line-height:0.65;
    white-space:pre;
    overflow:visible;
    padding:0px;
}
#warped .w0 {
    -moz-transform: rotate(-6.58rad)...