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>