JSFiddle - React, Tailwind, and code Playground

by abdollahpor

HTML

<div class="balaha"><div class="paiinha">
    <center>
<br><br><br><br><br><br>
    <p>انجمن کامپیوتر پیام نور کاشمر</p>
    </center>
</div></div>

CSS

body {
    background: #e6e6e6;
}

.balaha {
    background: #f6f6f6;
    height: 300px;
    margin: 65px auto;
    width: 300px;
    position: relative;
     
}
.balaha:after,
.balaha:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    Bottom:285px;
    width: 60px;
        
    }
.balaha:after {
    left: -40px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
     transform: rotate(-45deg);
    -webkit-box-shadow:#666  0px 12px 10px -12px;
    -moz-box-shadow:#666  0px 12px 10px -12px;
     box-shadow:#666  0px 12px 10px -12px;
}
.balaha:before {
    right: -40px;
    -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     transform: rotate(45deg);
     -webkit-box-shadow:#666  0px 12px 10px -12px;
     -moz-box-shadow:#666  0px 12px 10px -12px;
      box-shadow:#666  0px 12px 10px -12px;
}
.paiinha:after,
.paiinha:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top:285px;
    width: 60px;
    }
.paiinha:after {
    left: -40px;
    -webkit-transform: rotate(-135deg);
     -moz-transform: rotate(-135deg);
     transform: rotate(-135deg);
     -webkit-box-shadow:#666  0px 12px 10px -12px;
     -moz-box-shadow:#666  0px 12px 10px -12px;
      box-shadow:#666  0px 12px 10px -12px;
}
.paiinha:before {
    right: -40px;
    -webkit-transform: rotate(135deg);
     -moz-transform: rotate(135deg);
     transform: rotate(135deg);
     -webkit-box-shadow:#666  0px 12px 10px -12px;
     -moz-box-shadow:#666  0px 12px 10px -12px;
      box-shadow:#666  0px 12px 10px -12px;
}
p {font-family:"byeken", b yekan , tahoma ; font-size:20px;
    text-shadow:0px 0px 7px #b800b8;
}