JSFiddle - React, Tailwind, and code Playground

by devy indriyani

HTML

<p data-title="Informations Text" class="info-box_one">
<em>INFO:</em> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla commodi tempore voluptatem earum modi suscipit ipsa aspernatur autem amet harum unde assumenda nisi ex consequatur similique cupiditate facere ut nihil velit quos perspiciatis. Repudiandae neque vel aliquam odio doloribus labore.</p>

CSS

body {
    margin:35px 15px auto 15px;
}
.info-box_one {
  border-radius: 1em;
  color: #222;
  max-width: 32em;
  margin: 5% auto;
  padding: 2em 15px 15px;
  position: relative;
  width: 95%;}

.info-box_one:before {
  background: white;
  content: attr(data-title);
  left: 50%;padding: 0 1em;
  position: absolute;
  text-transform: uppercase;
  top: -0.6em;text-align: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);}

.info-box_one em {color:#9ceefe;font:bold italic 19px/normal Georgia;}
.info-box_one {
  border: 0.2em solid #37ddfd;
  box-shadow: inset 0 0 0.4em #05d5fc, 0 0 0.4em #05d5fc;}

.info-box_one:before {
  border-left: 0.2em solid #37ddfd;
  border-right: 0.2em solid #37ddfd;
  color: #9ceefe;font-weight:bold;}

JavaScript

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