JSFiddle - React, Tailwind, and code Playground

HTML

<h1><span class="has-borderBox">border-box</span> vs <span class="has-contentBox">content-box</span>:</h1>

<h2>Undeclared width &amp; height:</h2>
    
<span class="testbox has-borderBox">Test Element</span><br>
<span class="testbox has-contentBox">Test Element</span>

<h2>{width: 180px; height: 30px;}:</h2>
        
<span class="testbox declared-dims has-borderBox">Test Element</span><br>
<span class="testbox declared-dims has-contentBox">Test Element</span>

CSS

body {
    margin: 30px
}
h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1.5em 0 1em;
}

h2 {
    font-style: italic;
    font-size: 1.25em;
    color: #444;
    margin: 1.5em 0 1em;
    font-weight: normal;
}

.testbox {
    display:inline-block;
    border: 3px solid black;
    padding: 5px 20px;
    text-align: center;
    margin: 1px;
}

.has-borderBox {
    box-sizing: border-box;
    background-color: lime;
}

.has-contentBox {
    box-sizing: content-box;
    background-color: cyan;
}

.declared-dims {
    width: 180px;
    height: 30px;
}