JSFiddle - React, Tailwind, and code Playground

by ShockFamily

HTML

<div class="box12">
       <h1>Sample Box</h1>   
       <img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg">
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.
       </p>
    
       <br />
       <a href="http://www.designshock.com/"> DesignShock.com </a>
       <div class="fold_box12"></div>
       <div class="fold2_box12"></div>
       <div class="box12_ribbon"></div>    
</div>

CSS

body {
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    color: #4A4A4A ;
    text-align: center; 
}

.box12{
    margin: 40px auto;
    width: 300px;
    min-height: 310px;
    padding: 10px;
    position:relative;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-border-bottom-right-radius: 60px 60px;
    -webkit-border-bottom-left-radius: 60px 60px;
    -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    
}

.box12:before{
    content:'';    
    width: 25px;
    height: 20px;
    background: white;
    position: absolute;
    bottom:0; right:0;
    background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
    -webkit-border-bottom-right-radius: 30px;
    -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-20deg)
                        skew(-40deg,-3deg)
                        translate(-13px,-13px);
}

.box12:after{
    content: '';
    z-index: -10;
    width: 100px;
    height: 100px;
    position:absolute;
    bottom:0;
    right:0;
    background: rgba(0, 0, 0, 0.2);
    display: inline-block;
    -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
                        translate(-45px,-20px)
                        skew(20deg);
}
.fold_box12{
    z-index: -10;
    width: 50px;
    height: 50px;
    position:absolute;
    bottom:0; left:0;
    -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
                        translate(40px,-20px)
                        skew(-20deg);
}
.fold2_box12{
    width: 25px;
    height: 20px;
    z-index:20;
    background: white;
    position: absolute;
    bottom:0; left:0;
    background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
   ...