JSFiddle - React, Tailwind, and code Playground

by kein1945

HTML

<div class="dialog">
  <h1>I am a header</h1>
  <p>This page is created purely using CSS3! Not a single image</p>
  <p>Partly to show the indispensableness of this act, it may here be stated, that, in the old Dutch fishery, a mop was used to dash the running line with water</p>
</div>

CSS

body {
  font: 13px/20px helvatica, arial, sans-serif;
  padding-top: 50px;
}

p {
  display: block;
  margin-bottom: 15px;   
}

.dialog {
  width: 400px;
  margin: auto;
  padding: 20px 30px;
  border: 1px solid #ccc;
  -moz-border-radius: 12px;
  -moz-box-shadow: #aaa 0 0 10px;
  position: relative;
  z-index: 20;
}

.dialog h1 {
  margin-left: -45px;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #777;
  background: #444;
  background: -moz-linear-gradient(top, #555, #333);
  color: #fff;
  padding: 15px;
  text-align: center;
  width: 460px;
  position: relative;
  border: 1px solid #333;
  -moz-box-shadow: #444 0 1px 6px;
}

.dialog h1:before, .dialog h1:after {
  content: '';
  display: block;
  border-width: 15px;
  border-style: solid;  
  position: absolute;
  bottom: -16px;
  z-index: -10;
}

.dialog h1:before {
  border-color: transparent #333 transparent transparent;
  left: -16px;
}

.dialog h1:after {
  border-color: transparent transparent transparent #333;
  right: -16px;
}