JSFiddle - React, Tailwind, and code Playground

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;
    }
    
    #container > svg {
        width: 100%;
        height: 100%;
    }
    
    #container > p {
        position: absolute;
        left: 0;
        margin: 5% 10%;
        text-align: center;
        color: white;
    }