JSFiddle - React, Tailwind, and code Playground

by ShockFamily

HTML

<div class="holder">
    <div class="bullet"></div>
    <div class="line_one"></div>
    <div class="line_two"></div>
    <div class="pholder_one"></div>
</div>

<div class="wrap ">
       <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>

CSS

body{
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    color: #4A4A4A ;
    text-align: center;
    background:url(http://subtlepatterns.com/patterns/wood_pattern.png);
    
}

.wrap{
    margin: 20px auto;
    display: block;
    width: 300px;
    height: 310px;
    padding:20px;
    background-color: #F0F0F0;      /*background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2NkIAK8ffv2PyMR6hhGFeINJXDwgAhiwhIAIyslx2i5iywAAAAASUVORK5CYII=) repeat #fff;*/
    
    /*box-shadow*/
    -webkit-box-shadow:0 2px 5px hsla(0,0%,0%,.4),  inset 0 1px 0 #ccc,  inset 1px 0 0 #aaa,  inset 0 -1px 0 #ccc,  inset -1px 0 0 #aaa,  inset 0 2px 0 #c6c6c6,  inset 2px 0 0 #a6a6a6,  inset 0 -2px 0 #c6c6c6,  inset -2px 0 0 #a6a6a6,  inset 0 3px 0 #c0c0c0,  inset 3px 0 0 #a0a0a0,  inset 0 -3px 0 #c0c0c0,  inset -3px 0 0 #a0a0a0,  inset 0 4px 0 #b9b9b9,  inset 4px 0 0 #999,  inset 0 -4px 0 #b9b9b9,  inset -4px 0 0 #999,  inset 0 5px 0 #b6b6b6,  inset 5px 0 0 #969696,  inset 0 -5px 0 #b6b6b6,  inset -5px 0 0 #969696,  inset 0 6px 0 #b0b0b0,  inset 6px 0 0 #909090,  inset 0 -6px 0 #b0b0b0,  inset -6px 0 0 #909090,  inset 0 7px 0 #a9a9a9,  inset 7px 0 0 #898989,  inset 0 -7px 0 #a9a9a9,  inset -7px 0 0 #898989,  inset 0 8px 0 #a6a6a6,  inset 8px 0 0 #868686,  inset 0 -8px 0 #a6a6a6,  inset -8px 0 0 #868686,  inset 0 9px 0 #a0a0a0,  inset 9px 0 0 #808080,  inset 0 -9px 0 #a0a0a0,  inset -9px 0 0 #808080,  inset 0 10px 0 #888,  inset 10px 0 0 #666,  inset 0 -10px 0 #888,  inset -10px 0 0 #666,  inset 0 0 10px 10px hsla(0,0%,0%,.5),  inset 0 0 50px hsla(0,0%,0%,.5);
       -moz-box-shadow:0 2px 5px hsla(0,0%,0%,.4),  inset 0 1px 0 #ccc,  inset 1px 0 0 #aaa,  inset 0 -1px 0 #ccc,  inset -1px 0 0 #aaa,  inset 0 2px 0 #c6c6c6,  inset 2px 0 0 #a6a6a6,  inset 0 -2px 0 #c6c6c6,  inset -2px 0 0 #a6a6a6,  inset 0 3px 0 #c0c0c0,  inset 3px 0 0 #a0a0a0,  inset 0 -3px 0 #c0c0c0,  inset -3px 0 0 #a0a0a0,  inset 0 4px 0 #b9b9b9,  inset 4px 0 0 #999, ...