JSFiddle - React, Tailwind, and code Playground
by ShockFamily
HTML
<div class="box9">
<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;
}
.box9{
margin: 40px auto;
width: 300px;
min-height: 310px;
padding: 10px;
position:relative;
border: 1px solid rgba(0,0,0,0.1);
border-radius:20px;
background: white;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
.box9:before{
content: '';
width: 110%;
left: 0;
height: 111%;
z-index:-1;
position:absolute;
border-radius:20px;
border: 1px solid rgba(0,0,0, 0.1);
background: rgba(0, 0, 0, 0.0);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-webkit-transform: translate(-5%,-5%);
}
.box9:after{
content: '';
position:absolute;
top:-25px; left: 30%;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
.box9 img {
width: 100%;
margin-top: 15px;
}
p{
margin-top: 15px;
text-align: justify;
}
h1{
font-size: 20px;
font-weight: bold;
margin-top: 5px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
a{
text-decoration: none;
color: #4A4A4A !important;
}
a:hover{
text-decoration: underline;
color: #6B6B6B !important ;
}