JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <!--<div id="top-line"></div>
    <div id="bottom-line"></div>-->
    <div id="inner-wrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
  </div>  
</div>

CSS

#wrap {
    /*background: url('http://img209.imageshack.us/img209/5188/linedu.png') repeat top left;*/
    float:left;
    margin-top: 20px;
    position: relative;
}

#inner-wrap {
    float: left;
    margin-bottom: -40px;
}

#wrap #top-line,
#wrap #bottom-line {
    position: absolute;
    margin: 0px;
    height: 2px;
   /* background: url('http://img209.imageshack.us/img209/5188/linedu.png') repeat-x 0px -116px;*/
    left: 0px;
    right: 0px;
}

#wrap #top-line { top: -8px; }
#wrap #bottom-line { bottom: -28px; }

#inner-wrap > div {
    margin-bottom: 20px;
    margin-left:10px;
    float: left;
    width: 100px;
    height: 100px;
    background: #111;
    border: 1px solid red;
    text-align: center;
    color: #888;
}