JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<div class="ribbon-wrapper">
        <div class="ribbon-front">
            <!-- ribbon text goes here -->
        </div>
        <div class="ribbon-edge-topleft"></div>
        <div class="ribbon-edge-topright"></div>
        <div class="ribbon-edge-bottomleft"></div>
        <div class="ribbon-edge-bottomright"></div>
        <div class="ribbon-back-left"></div>
        <div class="ribbon-back-right"></div>
    </div>

CSS

/* ribbon style */

#ribbon .ribbonc.ribbon-wrapper {
    position: relative;
}
#ribbon .ribbonc .ribbon-front {
    background-color: #71b5c1;    height: 30px;
    width: 240px;
    position: relative;
    left:-20px;
    z-index: 2;
}


#ribbon .ribbonc .ribbon-edge-topleft,
#ribbon .ribbonc .ribbon-edge-topright,
#ribbon .ribbonc .ribbon-edge-bottomleft,
#ribbon .ribbonc .ribbon-edge-bottomright {
    position: absolute;
    z-index: 1;
    border-style:solid;
    height:0px;
    width:0px;
}

#ribbon .ribbonc .ribbon-edge-topleft,
#ribbon .ribbonc .ribbon-edge-topright {
}

#ribbon .ribbonc .ribbon-edge-bottomleft,
#ribbon .ribbonc .ribbon-edge-bottomright {
    top: 30px;
}

#ribbon .ribbonc .ribbon-edge-topleft,
#ribbon .ribbonc .ribbon-edge-bottomleft {
    left: -20px;
    border-color: transparent #3c7884 transparent transparent;
}

#ribbon .ribbonc .ribbon-edge-topleft {
    top: -10px;
    border-width: 10px 20px 0 0;
}
#ribbon .ribbonc .ribbon-edge-bottomleft {
    border-width: 0 20px 0px 0;
}

#ribbon .ribbonc .ribbon-edge-topright,
#ribbon .ribbonc .ribbon-edge-bottomright {
    left: 200px;
    border-color: transparent transparent transparent #3c7884;
}

#ribbon .ribbonc .ribbon-edge-topright {
    top: -10px;
    border-width: 10px 0 0 20px;
}
#ribbon .ribbonc .ribbon-edge-bottomright {
    border-width: 0 0 0px 20px;
}

#ribbon .ribbonc .ribbon-back-left {
    position: absolute;
    top: -10px;
    left: 0px;
    width: 0px;
    height: 30px;
        z-index: 0;
}

#ribbon .ribbonc .ribbon-back-right {
    position: absolute;
    top: -10px;
    right: 0px;
    width: 0px;
    height: 30px;
        z-index: 0;
}