JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<div id="content">
   <div class="container">
     <div class="bs-docs-example" id="headertext" style="text-align: justify;" data-content="Example">
   <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

$(document).on('click', '#changeheader', function() {
   $('#headertext').attr('data-content', $('#valuetochange').val() );
});