Tailwind CSS class .origin-center / .origin-*

<div class="bg-gray-300 w-24 h-24 m-2 inline-flex justify-center">
  <div class="origin-center transform scale-50 bg-teal-400 w-full h-full"></div>
</div>
<div class="bg-gray-300 w-24 h-24 m-2 inline-flex justify-center">
  <div class="origin-top transform scale-50 bg-teal-400 w-full h-full"></div>
</div>
<div class="bg-gray-300 w-24 h-24 m-2 inline-flex justify-center">
  <div class="origin-top-right transform scale-50 bg-teal-400 w-full h-full"></div>
</div>
<div class="bg-gray-300 w-24 h-24 m-2 inline-flex justify-center">
  <div class="origin-right transform scale-50 bg-teal-400 w-full h-full"></div>
</div>
<div class="bg-gray-300 w-24 h-24 m-2 inline-flex justify-center">
  <div class="origin-bottom-right transform scale-50 bg-teal-400 w-full h-full"></div>
</div>
<div class="bg-gray-300 w-24 h-24 m-2 inline-flex justify-center">
  <div class="origin-bottom transform scale-50 bg-teal-400 w-full h-full"></div>
</div>
<div class="bg-gray-300 w-24 h-24 m-2 inline-flex justify-center">
  <div class="origin-bottom-left transform scale-50 bg-teal-400 w-full h-full"></div>
</div>
<div class="bg-gray-300 w-24 h-24 m-2 inline-flex justify-center">
  <div class="origin-left transform scale-50 bg-teal-400 w-full h-full"></div>
</div>
<div class="bg-gray-300 w-24 h-24 m-2 inline-flex justify-center">
  <div class="origin-top-left transform scale-50 bg-teal-400 w-full h-full"></div>
</div>

.origin-center { transform-origin: center; }
.origin-top { transform-origin: top; }
.origin-top-right { transform-origin: top right; }
.origin-right { transform-origin: right; }
.origin-bottom-right { transform-origin: bottom right; }
.origin-bottom { transform-origin: bottom; }
.origin-bottom-left { transform-origin: bottom left; }
.origin-left { transform-origin: left; }
.origin-top-left { transform-origin: top left; }