JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row"><div class="bor col-md-7">Here 1</div><div class="bor col-md-3">Here 2</div><div class="bor col-md-2">Here 3</div></div>

SCSS

$width = 100%;
$max-col = 12;

.row {
    width: $width;    
}

.bor {
    margin: 0;
    padding: 0;
}

.col-md-1 {
    display: inline-block;
    width: percentage((1 / 12))
}

.col-md-2 {
    display: inline-block;
    width: percentage((2 / 12));
}

.col-md-3 {
    display: inline-block;
    width: percentage((3 / 12));
}
.col-md-4 {
    display: inline-block;
    width: percentage((4 / 12))
}

.col-md-5 {
    display: inline-block;
    width: percentage((5 / 12))
}

.col-md-6 {
    display: inline-block;
    width: percentage((6 / 12))
}

.col-md-7 {
    display: inline-block;
    width: percentage((7 / 12));
}

.col-md-8 {
    display: inline-block;
    width: percentage((8 / 12))
}

.col-md-9 {
    display: inline-block;
    width: percentage((9 / 12))
}

.col-md-10 {
    display: inline-block;
    width: percentage((10 / 12))
}

.col-md-11 {
    display: inline-block;
    width: percentage((11 / 12))
}

.col-md-12 {
    display: inline-block;
    width: percentage((12 / 12))
}