JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div id="columns">
    <div class="column">
        <div class="ionian">
            <div class="spiral left"></div>
            <div class="emblem"></div>
            <div class="spiral right"></div>
        </div>
        <div class="ring top"></div>
        <div class="tube">
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
        </div>
        <div class="ring bottom"></div>
        <div class="footer"></div>
        <div class="pedestal"></div>
    </div>
</div>
<div id="ground"></div>

SCSS

$stone: #eee;
$lightShade: #dfd6cd;
$hardShade: #b0a184;

@mixin halfGrad($a, $b) {
    background: linear-gradient(to right, $a 50%, $b 50%);
}

html, body { height: 100%; }
body {
    margin: 0;
    background: skyblue;
}

#columns {
    position: absolute;
    left:50%; bottom:10px;
    width: 276px;
    margin-left: -138px;
}
#columns:after {
    content: '';
    display: block;
    clear: both;
}

#ground {
    position: absolute;
    bottom: 0;
    width: 100%; height: 10px;
    background: green;
}

.column {
    float: left;
    margin: 0 40px;
    width: 58px;
}

.ionian {
    position: relative;
    width:100%; height:22px;
    box-shadow: inset 0 0 0 2px $hardShade;
    border-top: 6px solid $stone;
    @include halfGrad($lightShade, $hardShade);
    z-index: 2;
}
.ionian .emblem {
    position: absolute;
    left: 50%;
    width:12px; height:12px;
    margin: 3px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid $hardShade;
    @include halfGrad($stone, $lightShade);
}

.ionian .spiral {
    position: absolute;
    top: -6px;
    width:14px; height:28px;
    border-radius: 28px 0 0 28px;
    background: $stone;
}
.ionian .spiral.left { left: -14px; }
.ionian .spiral.right { 
    right: -14px;
    border-radius: 0 28px 28px 0;
}
.ionian .spiral:before {
    content: '';
    position: absolute;
    top:6px; left:14px;
    width:12px; height:22px;
    border-radius: 0 22px 22px 0;
    background: $stone;
}
.ionian .spiral.right:before {
    left: -12px;
    border-radius: 22px 0 0 22px;
}

.tube {
    position: relative;
    width:100%; height:100px;
    margin: 2px 0;
    background: $stone;
    padding: 2px 0;
    @include halfGrad($stone, $lightShade);
}
.tube .hole {
    float: left;
    margin-left: 3px;
    width: 8px;
    height: 100%;
    border-radius: 999px;
    background: $lightShade;
}
.tube .hole:nth-child(3) {
    background: linear-gradient(to right, $lightShade 50%, $hardShade 50%);
}
.tube .hole:nth-child(4), .hole:nth-child(5) {
...