JSFiddle - React, Tailwind, and code Playground

HTML

<div class="splash">
    <div class="splash-divider"><span></span></div>
</div>

<!--
    note: added a span insdie
    maybe not pixel perfect
    just to show you the idea
-->

CSS

.splash {
    background: url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
    height: 200px;
    
}

.splash-divider {
    position: relative;
    margin: 20px auto 0 auto;
    width: 50%;
    height: 30px;
    border-bottom: 1px solid transparent;
}

.splash-divider:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 30px;
    height: 30px;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.15);
    transform: rotate(-45deg) translate(-50%, -50%);
    -webkit-transform: rotate(-45deg) translate(-50%, -50%);
    -ms-transform: rotate(-45deg) translate(-50%, -50%);
    -moz-transform: rotate(-45deg) translate(-50%, -50%);
    -o-transform: rotate(-45deg) translate(-50%, -50%);
}

.splash-divider span:before,
.splash-divider span:after {
    position: absolute;
    top: 0;
    display: inline-block;
    content: "";
    width: 50%;
    height: 30px;
    border-bottom: 1px solid #fff;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}

.splash-divider span:before {
    left: -28px;
}

.splash-divider span:after {
    right: -16px;
}