JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="crazy"></div>

<div class="test">
    <h3>Content Box Sizing</h3>
    <div>
        <b></b>
        <o></o>
    </div>
</div>

<div class="test">
    <h3>Border Box Sizing</h3>
    <div class="border-box">
        <b></b>
        <o></o>
    </div>
</div>    

<div class="test">
    <h3>Content Box Sizing Rounded</h3>
    <div class="rounded">
        <b></b>
        <o></o>    
    </div>
</div>    

<div class="test">
    <h3>Border Box Sizing Rounded</h3>
    <div class="rounded border-box">
        <b></b>
        <o></o>    
    </div>
</div>

CSS

body {
    margin: 50px;
}

h3 {
    margin-bottom: 1em;
}

.test {
    background: #ccc;
    margin: 0px 20px 20px 0px;
    float: left;
}

b, o {
    display: block;
    height: 100px;
    width: 100px;
    background: #eee;
    box-shadow: 0px 0px 0px 6px red, 0px 0px 10px rgba(0, 0, 0, 0.4);
    margin-bottom: 50px;
}

b {
    border: 3px solid green;
}

o {
    outline: 3px solid green;
}

.border-box * {
    box-sizing: border-box;
}

.rounded * {
    border-radius: 10px;
}

.crazy {
    height: 0px;
    width: 0px;
    outline: 9px solid transparent;
    border-width: 30px;
    border-style: solid;
    border-color: red white transparent white;
    box-shadow: 0px 0px 0px 12px rgba(130, 20, 42, 0.4), 0px -28px 0px 12px rgba(130, 20, 42, 0.4), 0px 28px 0px 12px rgba(130, 20, 42, 0.4), 28px 0px 0px 12px rgba(130, 20, 42, 0.4), -28px 0px 0px 12px rgba(130, 20, 42, 0.4), 0px 0px 10px 29px red;
    margin: 0px 0px 50px;
    background: red;
    border-radius: 20px;
    -webkit-transform: rotateZ(135deg);
}