JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div class="roundedBox">
    <div class="r TopL"></div>
    <div class="r TopR"></div>
    <div class="r BtmL"></div>
    <div class="r BtmR"></div>
    <div class="content">
        Some content goes in here. Pretty spiffy rounded corners<br />
        using images!
    </div>
</div>

CSS

.roundedBox{
    position:relative;
    padding:10px;
}
.r {
    position:absolute;
}
.roundedBox .TopL {
    top:0;
    left:0;
}
.roundedBox .TopR {
    top:0;
    right:0;
}
.roundedBox .BtmR {
    bottom:0;
    right:0;
}
.roundedBox .BtmL {
    bottom:0;
    left:0;
}