JSFiddle - React, Tailwind, and code Playground

HTML

<div class='demo-set'>
        <div id="hexagon-point-demo" ></div>
        <div id="hexagon-mask-demo" ></div>
    </div>
<p class="image-caption-text" >Method 1 shown to the left.&nbsp;&nbsp;
        Method 2 shown to the right.</p>

CSS

/** For demo purposes: hexagons with points. */
    #hexagon-point-demo,
    #hexagon-mask-demo{
        position: relative;
        background: #008875; /** cyan-green */
        width: 100px;
        height: 60px;
        
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }
    #hexagon-point-demo:before,
    #hexagon-point-demo:after{
        position: absolute;
        left: 0px;
        width: 0px;
        height: 0px;
        content: " ";
        
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }    
    #hexagon-point-demo:before{
        top: -30px;
        border-bottom: 30px solid #b5ff93;
    }
    #hexagon-point-demo:after{
        bottom: -30px;
        border-top: 30px solid #939cff;
    }
    /** Masking demo. */
    #hexagon-mask-demo{
        height: 120px;
        border: none;
    }
    #hexagon-mask-demo:before,
    #hexagon-mask-demo:after{
        position: absolute;
        left: 0px;
        width: 0px;
        height: 0px;
        content: " ";
        
        border-right: 50px solid #ff9d93;
        border-left: 50px solid #ffe693;
    }
    #hexagon-mask-demo:before{
        top: 0px;
        border-bottom: 30px solid transparent;
    }
    #hexagon-mask-demo:after{
        bottom: 0px;
        border-top: 30px solid transparent;
    }
    
    .demo-set {
        min-height: 130px;
        width: 300px;
        margin: auto;
    }
    .demo-set #hexagon-point-demo{
        margin-top: 40px;
    }
    .demo-set > *:first-child{
        float: left;
        margin: 10px;
    }
    .demo-set > *:last-child {
        float: right;
        margin: 10px;
    }