JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="myDiv"> 
<h3>SUCCESS</h3>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore eaque facilis, incidunt, libero cumque alias adipisci odio, expedita earum explicabo maxime quasi doloremque. Rem, similique voluptas possimus consequuntur provident.</span></p></div>



<button id="of">Add content</button>
<button id="clr">Clear</button>

CSS

div::before {
  font-family: FontAwesome;
  content:"\f00c";
  position: absolute;
  left: 10px;
  top: -75px;
  bottom: 100px;
  font-size: 20em;
  opacity: 0.1;
} 

div {
  background-color: lightgreen;
  width: 700px;
  overflow: hidden;
  color: black;
  position: relative;
  padding: 10px;
}

div > p,
div > h3 {
  color: black;
}

JavaScript

var overflowBtn=document.getElementById("of");
var clearBtn=document.getElementById("clr");
overflowBtn.onclick=function() {
		document.getElementById("myDiv").innerHTML += "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus odio earum, possimus, esse quos architecto dignissimos recusandae non aspernatur accusamus optio magni, soluta vero doloremque? Laboriosam, accusamus, doloremque! Laudantium, deserunt?</p>";
};

clearBtn.onclick=function() {
	document.getElementById("myDiv").innerHTML = "<h3>SUCCESS</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus odio earum, possimus, esse quos architecto dignissimos recusandae non aspernatur accusamus optio magni, soluta vero doloremque? Laboriosam, accusamus, doloremque! Laudantium, deserunt?</p>";
};