JSFiddle - React, Tailwind, and code Playground

by CrazyDave2345

HTML

<div id='maincontainer' class='borderbox'>
    <header class='smallborderbox'>Header!</header>
    <div id='infobox'>
        <section class='borderbox'>
            <div class='verticalalign'>
                <img src='http://imgh.us/default(1).svg' id='statusimage'/>Connection Status</div>
        </section>
        <aside class='borderbox'>
            <div class='verticalalign'>Other</div>
        </aside>
    </div>
    <div id='compaitability message'>
        <!--Compaitability>
<!--[if lte IE 7]>
<script>var msg = 'The version of Internet Explorer appears to be outdated. The webpage may look weird and you should update your browser to at least IE 9 or the recommended IE 10 or greater.'</script>
<![endif]-->
        <!--[if IE 8]>
            <script>
                var msg = 'We reccomend you upgrade your version of internet explorer.'
            </script>
        <![endif]-->
        <noscript>Insert Name Here requires Javascript to operate. Please enable it in your browser</noscript>
    </div>
</div>

CSS

.verticalalign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
section {
    float: left;
}
aside {
    float: right;
}
.borderbox {
    border-radius: 3%;
}
.smallborderbox {
    border-radius: 1%;
    font-family:'arial';
    background: #2db34a;
    margin: 1%;
    padding: 5%;
    text-align: center;
}
section, aside {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    font-family:'arial';
    background: #2db34a;
    margin: 1%;
    padding: 4%;
    vertical-align: middle;
    text-align: center;
    font-size: 3.3vw;
    height: 20vmin;
    width: 40%;
}
#statusimage {
    float: left;
    top: 25%;
    width: 3em;
}