JSFiddle - React, Tailwind, and code Playground

HTML

<aside class="sidebar col-xs-3 pull-right">
        <div class="box-with-header queries">
          <div class="header-fixed">
            <h5 class="headline">Headline</h5>
          </div>
          <div class="content">
            <ul class="item no-bullets red">
              <li>Text Content</li>
              <li>Text Content</li>
              <li>Text Content</li>
            </ul>
            <hr />

            <ul class="item no-bullets blue">
              <li>Text Content</li>
              <li>Text Content</li>
              <li>Text Content</li>
            </ul>
            <hr />

            <ul class="item no-bullets yellow">
              <li>Text Content</li>
              <li>Text Content</li>
              <li>Text Content</li>
            </ul>
            <hr />
          </div>
        </div>
    </aside>

CSS

hr {
  margin: 10px 0;
}
aside.sidebar {
  background: #EDEDED;
  position: relative;
  z-index: 1;
}
.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.box-with-header {
  background: #FFFFFF;
  margin: 10px 0;
  overflow-y: auto;
  border-bottom: 2px solid #e0e0e0;
}
.box-with-header.queries {
  max-height: 270px;
  height: 208px;
}
.border-bottom {
  border-bottom: 2px solid #e0e0e0;
}
.headline {
  background: red;
  padding: 10px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  font-size: 13px;
  position:fixed;
  top:0;
  width:100%;
 
}
.item {
  padding: 0 5px;
  font-size: 13px;
  margin: 0 5px 5px;
  color: #6c6c6c;
}
.item.red {
  border-left: 3px solid #ef5a52;
}
.item.blue {
  border-left: 3px solid #56b3ed;
}
.item.yellow {
  border-left: 3px solid #efdb52;
}
.item .inline li {
  display: inline;
}

div.content{
     margin-top:40px;
}