JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pseudo">
    <h1>
Hello Foo Bar World!        
    </h1>
</div>

<div class="shadow">
    <h2>Hello Again</h2>
</div>

CSS

div.pseudo{position:relative;}
h1{
    border-top:1px solid grey;
    margin-top:10px;}
h1:before{
    content: " ";
    position: absolute;
    top:-5px;
    width:100%;
    z-index: -1;
    border-top: 5px solid orange;}
h1{
    border-top:5px solid red;
}
div.shadow{
    padding-top:40px;
}
div.shadow h2{
    border-top:4px solid red;
    box-shadow:0 -4px 0 4px black;
}