JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<div class="ribbon">ribbon foo</div>
<div class="ribbon ribbon--scaled">ribbon scaled</div>
<div class="ribbon ribbon--unscaled">ribbon unscaled</div>

SCSS

/* colours */
$colour-multipack       : #22a996;
$colour-bag             : #fbab29;
$colour-white           : #fff;
$colour-brand           : #00989e;

$ribbon-indent: 0.5em;
$ribbon-height: 2em;
$ribbon-icon-margin: 30px;

.ribbon {
    position: relative;
    margin: 1.5em $ribbon-icon-margin 1.5em $ribbon-indent;
    padding-left: 1em;
    background-color: $colour-brand;
    color: $colour-white;
    line-height: $ribbon-height;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: -$ribbon-indent;
        border: $ribbon-height/2 solid $colour-brand;
        border-left: $ribbon-indent solid transparent;
        border-right: 0;
    }
    &:after {
        content: 'foo';
        color: black;
        outline: 1px solid red;
        position: absolute;
        top: 50%;
        right: -$ribbon-icon-margin;
        transform: translateY(-50%);
        transform-origin: right;
    }
}
    .ribbon--scaled {
        &:after {
            content: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Runner-animated-svg.svg/64px-Runner-animated-svg.svg');
        transform: translateY(-50%) scale(0.8);
        }
    }
    .ribbon--unscaled {
        &:after {
            content: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Runner-animated-svg.svg/64px-Runner-animated-svg.svg');
        }
    }