JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
<div class="head">head</div>
<div>
    test
</div>
</div>

<div class="outer scale1">
<div class="head">head</div>
<div>
    test
</div>
</div>

<div class="outer scale2">
<div class="head">head</div>
<div>
    test
</div>
</div>

CSS

.outer {
    border: 10px solid brown;
    margin: 10px;
}

.head {
    height: 25px;
    background-color: brown;
}

.scale1 {
    transform: scale(0.5);
    -webkit-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
}

.scale2 {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -o-transform: scale(0.3);
    -ms-transform: scale(0.3);
}