JSFiddle - React, Tailwind, and code Playground

by GolezTrol

HTML

<div class="whitespace">
    <div class="outer container">
        <div class="outer helper">
            <div class="inner container">
                <div class="inner helper">
                    <p>Herroow Wuld
                    <p><a href="http://stackoverflow.com/questions/24782113/need-help-regarding-box-css">From this question</a>
                    <p>It's not completely right, but it might get you started.

CSS

.whitespace {
    position: relative;
}
.whitespace:before {
    content: "";
    display: block;
    position: absolute;
    border: 15px solid white;
    z-index: 3;
    height: 100%;
    width: 100%;
    top: -15px;
    left: -15px;
}

.container {
    box-sizing: border-box;
    padding: 3px;
    position: relative;
}
.outer.container,
.outer:before,
.outer:after {
    border-color: maroon;
    border-style: solid;
}
.inner.container,
.inner:before,
.inner:after {
    border-color: black;
    border-style: solid;
}

.container:before,
.container:after,
.helper:before,
.helper:after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 15px;
    background-color: white;
    box-sizing: border-box;
}

.container:before,
.container:after {
    top: -15px;
}
.helper:before,
.helper:after {
    bottom: -15px;
}
.outer:after,
.inner:after {
    right: -15px;
}
.outer:before,
.inner:before {
    left: -15px;
}
.outer:before,
.outer.after {
    z-index: 2;
}
.inner:before,
.inner.after {
    z-index: 1;
}
.container:before {
    border-width: 0 3px 3px 0;
}

.inner.helper {
    padding: 10px;
    height: 150px;
}