JSFiddle - React, Tailwind, and code Playground

by dipish

HTML

<div class="wrapper">
    <div class="port">
        <div class="chan active"></div>
        <div class="chan"></div>
        <div class="chan"></div>
        <div class="chan"></div>
    </div>
</div>

CSS

* {box-sizing: border-box;}

body {
    margin: 50px;
}

.wrapper {
    width: 50px;
    height: 50px;
}

.port {
    height: 100%;
    border: solid 2px #C17100;
}

    .chan {
        width: 25%;
        height: 100%;
        float: left;
        background: #ccc;        
    }