JSFiddle - React, Tailwind, and code Playground

by kizu

HTML

<span class="wrap">
        <span class="box block">display: block</span>
    </span>
    <span class="wrap">
        <span class="box inline">display: inline</span>
    </span>
    <span class="wrap">
        <span class="box inline-block">display: inline-block</span>
    </span>
    <span class="wrap">
        <span class="box float">float: left</span>
    </span>

CSS

.wrap {
    position: relative;
    display: block;
    width: 300px;
    height: 50px;
    margin: 0 0 10px;
    background: red;
    }
    .box {
        width: 150px;
        height: 100%;
        background: lime;
        }

    .block {
        display: block;
        }
    .inline {
        display: inline;
        }
    .inline-block {
        display: inline-block;
        }
    .absolute {
        position: absolute; /* If .wrap have position: relative, of course */
        }
    .float {
        float: left;
        }