JSFiddle - React, Tailwind, and code Playground

by mikkelb

HTML

<div id="columns">

        <div class="box box-split">
          <h3>Dolor <span>1234</span></h3>
          <ul>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">Ipsum</a></li>
            <li><a href="#">Dolor</a></li>
            <li><a href="#">Sit</a></li>
            <li><a href="#">Amet</a></li>
            <li><a href="#">Consectetur</a></li>
            <li><a href="#">Adipiscing</a></li>
            <li><a href="#">Elit</a></li>
            <li><a href="#">Sed</a></li>
            <li><a href="#">Do</a></li>
            <li><a href="#">Eiusmod</a></li>
            <li><a href="#">Tempor</a></li>
            <li><a href="#">Incididunt</a></li>
            <li><a href="#">Ut</a></li>
          </ul>
        </div>
        <div class="box box-split">
          <h3>Dolor <span>1234</span></h3>
          <ul>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">Ipsum</a></li>
            <li><a href="#">Dolor</a></li>
            <li><a href="#">Sit</a></li>
            <li><a href="#">Amet</a></li>
            <li><a href="#">Consectetur</a></li>
            <li><a href="#">Adipiscing</a></li>
            <li><a href="#">Elit</a></li>
            <li><a href="#">Sed</a></li>
            <li><a href="#">Do</a></li>
            <li><a href="#">Eiusmod</a></li>
            <li><a href="#">Tempor</a></li>
            <li><a href="#">Incididunt</a></li>
            <li><a href="#">Ut</a></li>
            <li><a href="#">Labore</a></li>
            <li><a href="#">Et</a></li>
            <li><a href="#">Dolore</a></li>
            <li><a href="#">Magna</a></li>
            <li><a href="#">Aliqua</a></li>
            <li><a href="#">Ut</a></li>
            <li><a href="#">Enim</a></li>
            <li><a href="#">Ad</a></li>
            <li><a href="#">Minim</a></li>
          </ul>
        </div>
        <div class="box box-split">
          <h3>Dolor <span>1234</span></h3>
          <ul>
            <li><a...

CSS

#columns { width: 940px; }
#columns > div { float: left; margin-left: 20px; }

/* .box { width: 220px; margin: 30px 0; overflow: hidden; }
.box h3 { background: black; color: white; padding: 3px 7px 5px; margin-bottom: 8px; }
.box h3 span { float: right; font-size: 11px; font-weight: normal; padding-top: 5px; }
.box li { border-top: 1px solid #ccc; padding: 3px 7px; }
.box li:first-child, .box .functions li { border-top: none; }

.box-split ul { -moz-column-width: 90px; -webkit-column-width: 110px; } */

ul {list-style: none; padding: 0; margin: 0;}
.box {overflow: hidden; width: 220px; margin: 30px 0; }
.box > h3 {
  background: #000;
  color: #fff;
}
.box > ul > li {
  float: left;
  width: 90px;
  border-bottom: 1px solid #666;
    position: relative;
  top: 1px;
}
.box > ul > li > a {
  display: block;
  color: #000;
  text-decoration: none;
}