JSFiddle - React, Tailwind, and code Playground

HTML

<h1>margined</h1>
<div class="blue">
    <div class="green margined"></div>
</div>

<h1>multiple margined</h1>
<div class="blue">
    <div class="green margined"></div>
    <div class="green margined"></div>
</div>

<h1>margined no border</h1>
<div class="blue noborder">
    <div class="green margined"></div>
</div>

<h1>padded</h1>
<div class="blue padded">
    <div class="green"></div>
</div>

<h1>multiple padded</h1>
<div class="blue padded">
    <div class="green"></div>
    <div class="green"></div>
</div>

CSS

h1 {
    margin: 10px 0 5px;
}

.blue {
    background-color: #729fcf;
    border: 1px solid #3465af;
    max-width: 300px;
}

.green {
    background-color: #aecf00;
    border: 1px solid #3465af;
    min-height: 50px;
}

.margined {
    margin: 30px;
}

.padded {
    padding: 30px;
}

.noborder {
    border: 0;
}