JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<h2>Desktop</h2>
<div id="topPanel" class="g media-query-desktop">
    <div class="u businessCard">BC</div>
    <div class="u askMeAbout">AMA</div>
    <div class="u extraInfo">EI</div>
</div>

<h2> iPad Vertical</h2>
<div id="topPanel" class="g media-query-ipad-v">
    <div class="u businessCard">BC</div>
    <div class="u askMeAbout">AMA</div>
    <div class="u extraInfo">EI</div>
</div>

CSS

#topPanel {
    border: 2px solid black;
    margin: 0 auto;
}
.media-query-desktop > .u {
    height: 150px;
}
.media-query-desktop > .businessCard {
    width: 50%;
}
.media-query-desktop > .askMeAbout {
    width: 25%;
}
.media-query-desktop > .extraInfo {
    width: 25%;
}

/*---- iPad Vertical ---- */
.media-query-ipad-v > .u {
    height: 150px;
}
.media-query-ipad-v > .businessCard {
    width: 66.66666%;
}
.media-query-ipad-v > .askMeAbout {
    width: 33.33333%;
}
.media-query-ipad-v > .extraInfo {
    width: 100%;
    height: 50px;
}


/*---- Base Styles ---- */
.media-query-desktop {
    width: 90%;
}
.media-query-ipad-v {
    width: 50%;
}
.businessCard {
    background-color: red;
}
.askMeAbout{
    background-color: green;
}
.extraInfo {
    background-color: blue;
}
/*-------------------------------
---- Grid Styles ---------------*/

.yui3-g,.g{letter-spacing:-0.31em !important;*letter-spacing:normal !important;word-spacing:-0.43em !important}
/* Normalize letter/word spacing */
.yui3-u,.u,yui3-u-1,.u-1,.u-24-24,.yui3-u-1-2,.u-12-24,.yui3-u-1-3,.u-8-24,.yui3-u-2-3,.u-16-24,.yui3-u-1-4,.u-6-24,.yui3-u-3-4,.u-18-24,.yui3-u-1-5,.u-1-5,.yui3-u-2-5,.u-2-5,.yui3-u-3-5,.u-3-5,.yui3-u-4-5,.u-4-5,.yui3-u-1-6,.u-4-24,.yui3-u-5-6,.u-20-24,.yui3-u-1-8,.u-3-24,.yui3-u-3-8,.u-9-24,.yui3-u-5-8,.u-15-24,.yui3-u-7-8,.u-21-24,.yui3-u-1-12,.u-2-24,.yui3-u-5-12,.u-10-24,.yui3-u-7-12,.u-14-24,.yui3-u-11-12,.u-22-24,.yui3-u-1-24,.u-1-24,.yui3-u-5-24,.u-5-24,.yui3-u-7-24,.u-7-24,.yui3-u-11-24,.u-11-24,.yui3-u-13-24,.u-13-24,.yui3-u-17-24,.u-17-24,.yui3-u-19-24,.u-19-24,.yui3-u-23-24,.u-23-24{letter-spacing:normal;word-spacing:normal}

/* Allow the generic "u" class to be used at all resolutions */
.yui3-u,.u{display:inline-block;zoom:1;*display:inline;vertical-align:top}