JSFiddle - React, Tailwind, and code Playground

HTML

<h1>test</h1>

    <div id="ptsAlert">
        <span class="ptsAlert">
        	10
			<div class="ptsAlert-arrow"></div>
        </span>
	</div>

<table>
    <tr>
        <td class="btn">01</td>
        <td class="btn">02</td>
        <td class="btn">03</td>
    </tr>
    <tr>
        <td class="btn">04</td>
        <td class="btn">05</td>
        <td class="btn">06</td>
    </tr>
</table>

CSS

h1 {
    font-size:50px;
    margin:10px;
}
body {
    text-align:center;
}
td {
    border: 1px solid;
    padding: 5px;
    cursor: pointer;
}

.ptsAlert {
  display:none;
  background-color: #EE0000;
  color: #FFFFFF;
  font-size: 27px;
  font-weight: bold;
  line-height: 1.7em;
  margin: 10px auto;
  padding: 0 10px;
  position: absolute;
  text-align: center;
}

.ptsAlert-arrow{
  border-color: #EE0000 transparent transparent;
  border-style: solid;
  border-width: 8px;
  bottom: -15px;
  height: 0;
  left: 3px;
  position: absolute;
  width: 0;
}

JavaScript

//Function to show points alerts
	$('.btn').click(function(event) {
		$('#ptsAlert').clone(true, true).contents()
			.appendTo('body')
			.css('top', (event.pageY - 75) + 'px')
			.css('left', (event.pageX - 10) + 'px')
			.css('display', 'inline-block')
			//.hide().fadeIn(); //this line breakes the code 
	});