JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<div class="caspinfoheader">
  <div class="caspinfoblockc">
    <div class="caspinfoblock">
      <div class="caspinfobar">welcome</div>
      <div class="caspinfosec">to <strong>our site.</strong> here is where you write about how awesome you are! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis ut libero vel dictum. Duis efficitur at est a maximus. Duis dolor massa, fermentum ac consectetur
        sit amet, eleifend in neque. Cras bibendum sapien sed luctus commodo. Integer gravida, felis eu cursus placerat, ipsum felis tempus tortor, et tempus massa dolor sit amet sapien.</div>

    </div>
    <div class="caspinfoblock">
      <div class="caspinfolinkl">
        <div class="caspinfolink"><a href="link">link</a></div>
        <div class="caspinfolink"><a href="link">link</a></div>
        <div class="caspinfolink"><a href="link">link</a></div>
        <div class="caspinfolink"><a href="link">link</a></div>
        <div class="caspinfolink"><a href="link">link</a></div>
      </div>
      <div class="caspinfolinkr">
        <div class="caspinfolink"><a href="link">link</a></div>
        <div class="caspinfolink"><a href="link">link</a></div>
        <div class="caspinfolink"><a href="link">link</a></div>
        <div class="caspinfolink"><a href="link">link</a></div>
        <div class="caspinfolink"><a href="link">link</a></div>
      </div>
    </div>

    <div class="caspinfoblock">
      <div class="caspinfobar">updates</div>
      <div class="caspinfosec">
        <div class="caspdate">jul 15</div>
        <div class="caspdatecont">launched new theme. here is a place for you to put your site's updates!</div>
        <div class="caspdate">feb 1</div>
        <div class="caspdatecont">launched new theme. here is a place for you to put your site's updates!</div>
      </div>
    </div>
  </div>
</div>

CSS

.caspinfoheader {
 background: transparent;
 height: 200px;
 position: relative;
 width: 900px;
}
.caspinfoblock {
 background: #fff none repeat scroll 0 0;
 float: left;
 height: 160px;
 margin-left: 10px;
 width: 206px;
}
.caspinfoblock:nth-child(2) {
 background: none;
}
.caspinfoblock:nth-child(3) {
 background: none;
}
.caspinfoblock:nth-child(1) {
 margin-left: 0;
}
.caspinfoblockc {
 height: 200px;
 left: 50%;
 margin: -80px 0 0 -427px;
 position: absolute;
 top: 50%;
 width: 854px;
}
.caspinfobar {
 background: #01262f none repeat scroll 0 0;
 color: #fff;
 font-family: catamaran;
 font-weight: 800;
 height: 32px;
 line-height: 32px;
 text-align: center;
 text-transform: lowercase;
}
.caspinfolinkl {
 float: left;
 width: 99px;
}
.caspinfolinkl {
 float: right;
 width: 99px;
}
.caspinfolink {
 color: #fff;
 font-family: catamaran;
 font-size: 8pt;
 font-weight: 600;
 height: 32px;
 line-height: 32px;
 text-align: center;
 text-transform: uppercase;
 width: 99px;
}
.caspinfolink a {
 color: #fff;
 text-decoration:none;
}
.caspinfolink:nth-child(1) {
 background: #7c99a7;
}
.caspinfolink:nth-child(2) {
 background: #5d7c89;
}
.caspinfolink:nth-child(3) {
 background: #3f606b;
}
.caspinfolink:nth-child(4) {
 background: #1f424d;
}
.caspinfolink:nth-child(5) {
 background: #01262f;
}
.caspinfosec {
 font-family: catamaran;
 font-size: 8pt;
 height: 150px;
 line-height: 12px;
 margin-left: 15px;
 margin-top: 15px;
 overflow-x: hidden;
 overflow-y: scroll;
 text-align: justify;
 width: 176px;
}
.caspinfosec strong {
 font-weight: 900;
 text-transform: uppercase;
 color: #3F606B;
}
.caspdate {
 color: #3f606b;
 float: left;
 font-size: 18px;
 font-weight: 900;
 line-height: 35px;
 margin-bottom: -5px;
 margin-right: 10px;
 text-transform: uppercase;
}
.caspdatecont {
 margin-bottom: 15px;
 margin-left: 65px;
 width: 109px;
}