JSFiddle - React, Tailwind, and code Playground

by jackdent

HTML

<div></div><br>

CSS

div{
    position: relative;
    width: 400px;
    height: 400px;
    z-index: 100;
    /* My stipped background */
    background: #D1D1D1; /* Old browsers */
    background: -moz-repeating-linear-gradient(-45deg, #BC1724 , #BC1724 30px, #F2F2F2 30px, #F2F2F2 40px, #24538A 40px, #24538A 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    background: -webkit-repeating-linear-gradient(-45deg, #BC1724 , #BC1724 30px, #F2F2F2 30px, #F2F2F2 40px, #24538A 40px, #24538A 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    background: -o-repeating-linear-gradient(-45deg, #BC1724 , #BC1724 30px, #F2F2F2 30px, #F2F2F2 40px, #24538A 40px, #24538A 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    background: repeating-linear-gradient(-45deg, #BC1724 , #BC1724 30px, #F2F2F2 30px, #F2F2F2 40px, #24538A 40px, #24538A 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    /*border-radius*/
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /*box-shadow*/
    -webkit-box-shadow: 0px 1px 6px #3F3F3F;
    -moz-box-shadow: 0px 1px 6px #3F3F3F;
    box-shadow: 0px 1px 6px #3F3F3F;
    -moz-box-shadow: 0px 5px 11px rgba(0,0,0,0.71), inset 0px 1px 1px rgba(255,255,255,1);
    -webkit-box-shadow: 0px 5px 11px rgba(0,0,0,0.71), inset 0px 1px 1px rgba(255,255,255,1);
    box-shadow:inset 0px 1px 1px rgba(255,255,255,1), 0px 5px 11px rgba(0,0,0,0.71);
}
div:after {
    background: #F9F9F9;
    margin: 15px;
    position: absolute;
    content : " ";
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    border: 1px #E5E5E5 solid;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}