JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="block">
    <div class="box">I am block</div>
</div>

<br>
<br>

<div class="inline-block">
    <div class="box">I am inline-block</div>
</div>

<div class="inline-block">
    <div class="box">I am inline-block</div>
</div>


<div class="inline">
    <div class="box">I am inline. I have n0 margins, no height. just pading and border</div>
</div>

SCSS

* {
    margin: 0; box-sizing: border-box;
}

.box {
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: transparent;
    margin: 20px;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
    min-width: 200px;
}

.inline {
    display: inline;
    min-width: 200px;
}