JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<section>
    <article>
        <label>This is a test</label>
        <div></div>
    </article>
    <article>
        <label>This is a test</label>
        <div></div>
    </article>
    <article>
        <label>This is a test</label>
        <div></div>
    </article>
    <article>
        <label>This is a test</label>
        <div></div>
    </article>
</section>

<aside>
    <nav>
        <a>
            <label>home</label>
            <div></div>
        </a>
        <a>
            <label>About</label>
            <div></div>
        </a>
        <a>
            <label>Contact</label>
            <div></div>
        </a>
    </nav>
</aside>

CSS

aside {
  width: 340px;
  position: absolute;
}

a{
    display: block;
    border-top: #ffffff solid 1px;
    border-bottom: #999 solid 1px;
    }


div{
      background:#000000;
      height: 85px;
      width: 85px;
    }



section{
  float: left;
  width: 100%;
  margin-left: 340px;
}

article{
    border-top: #ffffff solid 1px;
    border-bottom: #999 solid 1px;
}
    

label{
      padding-top: 25px;
      text-transform: uppercase;
      font-family: helvetica;
      font-size: 32px;
      font-weight: 600;
      margin-left: 120px;
      float: left;
    }