JSFiddle - React, Tailwind, and code Playground

Typography - Header Underline

by Jennifer Perrin

HTML

<p class="title">Typography</p>

CSS

.title {
  font-family: "Times", Times New Roman, serif;
  margin: 15% auto;
  text-align: center;
  font-size: 144px;
  color: #1d1d1f;
  display: inline-block;
  clear: both;
  text-shadow: -5px 0 0 #FFeFFF, 2px 0 0 #FFeFFF, -8px -4px 0 #FFeFFF, 4px 4px 0 #FFeFFF, -6px -6px 0 #FFeFFF, 0 -8px 0 #FFeFFF, 0 8px 0 #FFeFFF, 6px 6px 0 #FFeFFF;
  position: relative;
}
.title:before {
  content: "";
  height: 5px;
  background-color: #1d1d1f;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: -50;
}

body {
  margin: 0 auto;
  text-align: center;
  background: #FFeFFF;
}