JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<div id="container">
    <p>Strawberry Mango</p>
    <svg viewBox="0 0 10 10" preserveAspectRatio="none">
        <path d="M 0,0 L 10,0 9.5,5 10,10 0,10 0.5,5 z" fill="black"></path>
        <path d="M 0.25,0.75 L 9.75,0.75 9.3,5 9.75,9.25 0.25,9.25 0.75,5 z" fill="orange"></path>
    </svg>
</div>

CSS

#container {
    height: 60px;
    position: relative;
    display:inline-block;
}
#container > svg {
    width: 100%;
    height: 100%;
    position:absolute;
    left:0; top:0;
    z-index:-1;
}
#container > p {
    margin: 5% 10%;
    text-align: center;
    color: white;
}