JSFiddle - React, Tailwind, and code Playground

by Sander Houttekier

HTML

<div id="header">test 1 2 3</div>
<div class="arrow-container">
<div class="arrow-down-border"></div>
<div class="arrow-down"></div>
</div>

CSS

#header { padding:10px; color:white; font-weight:bold; background: #FF6A00; height: 30px; border-bottom: 2px solid black;}
.arrow-container {position: relative; background:blue;}
.arrow-down {
        position:absolute;
        top:-2px;
        left: 50%;
        margin-left:-10px;
        
        padding-top:30px;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
}
.arrow-down-border {
        position:absolute;
        top:-2px;
        left: 50%;
        margin-left:-12px;
        padding-top:30px;
        width:0;
        height:0;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        border-top:22px solid black;
}