JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<div class="demos">
    <div class="demo --1">
        <ul>
            <li>foo</li>
        </ul>
        <ul>
            <li>foo</li>
            <li>foo</li>
        </ul>
        <ul>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
        </ul>
        <ul>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
        </ul>
        <ul>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
        </ul>
    </div>
    <div class="demo --2">
        <ul>
            <li>foo</li>
        </ul>
        <ul>
            <li>foo</li>
            <li>foo</li>
        </ul>
        <ul>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
        </ul>
        <ul>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
        </ul>
        <ul>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
            <li>foo</li>
        </ul>
    </div>
</div>

SCSS

@mixin split-flow($line-height, $splits: 4, $min: 1) {
    $line-margin: ($line-height / $splits);
    $min: $line-height * $min;

    & { margin-bottom: $line-margin }
    &:last-child { margin-bottom: $line-height }

    @for $i from 2 through $splits {
        $margin: $line-height - $line-margin * ($i - 1);
        @if $margin < $min {
            $margin: $margin + $line-height;
        }
        &:nth-child(#{$splits}n + #{$i}):last-child {
            font-weight: bold;
            margin-bottom: $margin;
        }
    }
}



/* USAGE ******************************************************/
$lh: 1.25em;
ul {
  background: rgba(128, 192, 255, 0.4);
  margin: 0;
}

li {
    @include split-flow($lh, 4);
}
.demo.\--2 li {
    @include split-flow($lh, 4, .66);
}



/* DEMO *******************************************************/
html, body {
  margin: 0;
}

body {
    background: linear-gradient(to bottom, #FFF, #FFF 95%, #000 95%, #000);
    background-size: $lh $lh;
    line-height: $lh;
    text-align: center;
    &:hover {
        background: none;
        }
}

.demos {
    display: inline-block;
    overflow: hidden;
    margin: $lh;
    text-align: left;
}

.demo {
    float: left;
    margin: 0 ($lh / 2);
    width: 230px;
}