JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<div id="outer">
<div id="parade-reynolds-outer-container">
    <div id="parade-reynolds-inner-container">
    <div id="parade-reynolds-left-pane">
        <div id="parade-reynolds-clock-container">
            <img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgKCNn834HRABGAEyCMRmUdS8Wdu7" id="parade-reynolds-clock-image"><div id="parade-reynolds-clock-text-container">
            <div id="parade-reynolds-clock-text-top"><span>Save</span></div>
            <div id="parade-reynolds-clock-text-middle"><span>30</span></div>
            <div id="parade-reynolds-clock-text-bottom"><span>Minutes</span></div>
        </div>
            </div>    </div>
    <div id="parade-reynolds-right-pane">
        <div id="parade-reynolds-header">
            <div id="parade-reynolds-header-inner-container">
            <div id="parade-reynolds-logo-container">
                <div id="parade-reynolds-logo-text"><span>BROUGHT TO YOU BY</span></div>
                <img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgKCNn43nqAEQARgBMgiGLcDeJ4PpbQ" id="parade-reynolds-logo-image">
            </div>
            <div id="parade-reynolds-button-container">
                <div id="parade-reynolds-button"><span>Meal Magic Time Saver</span></div>
            </div>
            </div>
        </div>
        <div id="parade-reynolds-content-container">
            <div id="parade-reynolds-content">
                <span>Make hardened brown sugar usable again by wrapping it in aluminum foil and placing it in a 300- degree oven for 5 minutes. Caution: Hot to the touch. Measure immediately before it cools.</span>
            </div>
        </div>
    </div>
    </div>
</div>
    </div>

CSS

#outer{max-width: 680px;}
#parade-reynolds-outer-container {
  font: normal 14px/18px "proxima-nova", Helvetica, Arial, sans-serif;
  border: 1px solid #eee;
  padding: 10px;
  position: relative;
  margin: 10px 0;
}
#parade-reynolds-inner-container {
  position: relative;
}
#parade-reynolds-left-pane {
  width: 20%;
  left: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
#parade-reynolds-clock-container {
font-size: 15px;
   line-height: 20px;
 font-weight: lighter;
text-align: center;
position: absolute;
top: 0px;
bottom: 0px;
left: 0;
right: 0;
}
#parade-reynolds-clock-text-container {
  width: 40px;
  position: absolute;
  top: 0px;
  margin: 25px auto;
  width: 95px;
  color: #fff;
}
#parade-reynolds-clock-text-middle {
  font-size: 28px;
}
#parade-reynolds-clock-image {
  height: 100%;
position: absolute;
left: 0;
bottom: 0;
top: 0
}
#parade-reynolds-right-pane {
  width: 80%;
  position: relative;
  left: 20%;
   padding: 5px;
}
#parade-reynolds-header {
  width: 100%;
  position: relative;
}
#parade-reynolds-header-inner-container {
  position: relative;
}
#parade-reynolds-logo-container{
  width: 60%;
  position: absolute;
  height: 100%;
}
#parade-reynolds-logo-text {
  font-size: 10px;
  color: #cacaca;
  top: 35%;
  position: relative;
}
#parade-reynolds-logo-image {
    position: absolute;
    width: 100px;
    top: 0px;
right: 0
}
#parade-reynolds-button-container {
  width: 40%;
  position: relative;
  left: 60%;
}
#parade-reynolds-button {
  text-align: center;
}
#parade-reynolds-button span {
font-size: 13px;
padding: 5px 9px;
  background-color: #004891;
  color: #fff;
}
#parade-reynolds-content-container {
  //width: 100%;
  //position: relative;
}
#parade-reynolds-content{
  //position: absolute;
  //bottom: 0;
  margin-top: 10px;
}