JSFiddle - React, Tailwind, and code Playground

Div gets pixelated when using css transofrm scale

HTML

<div class="foo"></div>

CSS

body{
    margin: 200px;
    width: calc(100vw - 400px);
    height: 100vh;
}
.foo {
	background: #4FC093;
	display: block;
	position: relative;
	width: 200px;
	height: 200px;
	box-shadow: 0 0 10px inset;
	margin-left: 5px;
    float: left;
	cursor: pointer;
	-webkit-transition: all 3s ease;
	-moz-transition: all 3s ease;
	-ms-transition: all 3s ease;
	transition: all 3s ease;
    z-index: 1;
    transform:rotate(10deg);
}

.foo:hover {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
    z-index: -1;
}