JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
<div class="circle" ref="circle"></div>
</div>
CSS
body {
overflow: hidden;
}
.circle {
display: inline-block;
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
JavaScript
new Vue({
el: '#app',
created() {
document.addEventListener('mousemove', e => {
this.$refs.circle.style.left = `${e.pageX}px`;
this.$refs.circle.style.top = `${e.pageY}px`;
});
},
});