JSFiddle - React, Tailwind, and code Playground

HTML

<div>ribbonElement.setAttribute('ribbon', <input id="attrText" type="text"/>)</div>

<div id="ribbon" class="ribbon" ribbon="I am a CSS Ribbon"></div>

CSS

.ribbon:before {
     display: block;
     content: attr(ribbon);
     background: #eee;
}
           
.ribbon:after {
     display: block;
     content: " ";
     border-left: 5px dotted transparent;
     border-top: 5px solid #ccc;
     height: 0;
     width: 0;
}

/*** Non-Functional Apperance Styles ***/

div.ribbon { margin: 20px; float: left; font-size: 11px; font-family: Arial; }
div.ribbon:before { padding: 2px 3px; }

JavaScript

document.getElementById('attrText').addEventListener('keyup', function(){
    document.getElementById('ribbon').setAttribute('ribbon', this.value);
});