JSFiddle - React, Tailwind, and code Playground

Heading Classes

by Jennifer Perrin

HTML

<h4 class="line text-center">
<span>Heading Class "Line"</span>
</h4>

<h4 class="line2 text-center">
<span>Heading Class "Line2"</span>
</h4>

<h4 class="line3 text-center">
<span>Heading Class "Line3"</span>
</h4>

CSS

.line {
    border-bottom: 1px solid #2790b0;
    display: block;
    margin: 40px 0 30px;
    padding-bottom: 10px;
}
.line span {
    border-bottom: 10px solid #2790b0;
    padding: 0 10px 10px;
    position: relative;
}
.line span::before {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #2790b0;
    bottom: -19px;
    content: "";
    display: inline-block;
    left: 45%;
    position: absolute;
}

.line2 {
    border-bottom: 1px solid #2790b0;
    display: block;
    margin: 10px 0 30px;
    padding-bottom: 3px;
}
.line2 span {
    border-bottom: 6px solid #2790b0;
    padding: 0 10px 2px;
    position: relative;
}
.line2 span::before {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #2790b0;
    bottom: -12px;
    content: "";
    display: inline-block;
    left: 45%;
    position: absolute;
}
.line3 {
    border-bottom: 1px solid #2790b0;
    display: block;
    margin: 0 0 15px;
    padding-bottom: 3px;
}
.line3 span {
    border-bottom: 5px solid #2790b0;
    padding: 0 10px 3px;
    position: relative;
}
.line3 span::before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2790b0;
    bottom: -8px;
    content: "";
    display: inline-block;
    left: 45%;
    position: absolute;
}

.text-center { text-align: center; }