JSFiddle - React, Tailwind, and code Playground

by devy indriyani

HTML

<div class="box-text">
INFO :
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum mollis quam, sed bibendum enim hendrerit at. Aliquam diam elit, commodo non mollis quis, suscipit ac urna. Fusce ac magna sit amet augue laoreet sodales. Molis ipsum in dolor fringilla et dapibus ante suscipit. Vivamus a nunc urna, eu tempor ante. Cras facilisis auctor dolor, non sodales leo rhoncus ut. Proin sit amet tortor tortor.<br/> <a style="font:bold italic 15px/normal Helvetia;color:orange" href="http://sahabatblogger77.blogspot.com">&raquo; Info by. Sahabat Blogger 77</a>
</div>

CSS

body {
    padding:20px;
}
.box-text {
  background: #666;
  text-align:left;
  font:16px/normal Helvetia,Sans Serif;
  color:#fff;
  padding: 15px;
  border-radius:3px;
  border:1px solid #333;
  margin:2em 0 0 0;
}

.box-text:before, .box-text:after {
  content: "";
  position: absolute;
  z-index: -2;
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  bottom: 225px;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.75);
  height: 20%;
  left: 40px;
  max-height: 100px;
  width:240px;
}

.box-text:after {
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  left: auto;
  right: 40px;
}

JavaScript

/* lisenci code for info dialog boxes
type: modified boxed info curva effect
visit: http://sahabatblogger77.blogspot.com */