JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="text1" class="myButton">Text1</a>

<div id='warrior-panel'>
  <img src="https://vignette3.wikia.nocookie.net/adventuretimewithfinnandjake/images/f/fd/Link.png/revision/latest?cb=20120702202705">
</div>
<div id="description">
  <p id="descriptiontext">Hover over a category</p>
</div>

CSS

#warrior-panel {
  background-color: grey;
  text-align: center;
}

.tag {
  position: absolute;
  text-align: center;
}

img {
  background-color: darkgrey;
}

JavaScript

//$("#text1").hover(function(){
//$('#descriptiontext').slideUp('fast', function(){
//    $('#descriptiontext').text("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.").slideDown('fast');
//    });
//}, function() {
//	// When mouse leaves.
//}); 

const warriorPanel = document.getElementById('warrior-panel');
let width = warriorPanel.offsetWidth;
let height = warriorPanel.offsetHeight;

let testNode = document.createTextNode("Test");
$("#testNode").parent().css({position: 'relative'});
$("#testNode").css({top: '200px', left: '200px', position:'absolute'}); position:'absolute'});

let node = warriorPanel.appendChild(testNode);