JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
   <div class="container">
     <div id="bs-header" class="bs-docs-example" data-content="Example Header">
   <h2>Header</h2>
       <p>Paragraph</p>
     </div>
   </div>
</div>

<input type="text" id="valuetochange" />
<input type="button" id="changeheader" value="Change Header"  />

CSS

.bs-docs-example 
{
    position: relative;
    margin: 15px 0;
    padding: 39px 19px 14px;
    background-color: white;
    border: 1px solid #DDD;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
 
.bs-docs-example::after
{
    content: attr(data-content);
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: whiteSmoke;
    border: 1px solid #DDD;
    color: #9DA0A4;
    -webkit-border-radius: 4px 0 4px 0;
    -moz-border-radius: 4px 0 4px 0;
    border-radius: 4px 0 4px 0;
}

.bs-docs-newheader::after{
       
}

JavaScript

function doChange( newTitle ){
	var getHeader = document.getElementById('bs-header');
	getHeader.attributes["data-content"].value = newTitle; 
}

var changeHeaderButton = document.getElementById( 'changeheader' );

changeHeaderButton.addEventListener( 'click', function( event ){
  var changeToValue = document.getElementById( 'valuetochange' ).value;
  doChange( changeToValue );
});