Trying CSS art with Tailwind

I'm fiddling with making art with Tailwind to improve some design and CSS skills.

Does it make sense? Isn't it harder than with pure CSS? I don't care, it's just for the sake of it 😁

It's loosely based on this post.

Run it here: https://play.tailwindcss.com/BInT1TVC7i?size=540x720

Code:

<div class="flex h-[100vh] w-full items-center justify-center bg-blue-300">
  <div class="relative h-[200px] w-[200px] rounded-full bg-orange-300 shadow-2xl">
    <div class="0 absolute left-1/2 top-1/3 h-[50px] w-[130px] -translate-x-1/2">
      <div class="flex items-center justify-between">
        <div class="relative h-[0px] w-[40px] rounded-t-full border-t-[20px] border-t-white">
          <div class="absolute -top-[10px] left-1/2 h-[10px] w-[10px] rounded-t-full bg-slate-600"></div>
        </div>
        <div class="relative h-[0px] w-[40px] rounded-t-full border-t-[20px] border-t-white">
          <div class="absolute -top-[10px] left-1/2 h-[10px] w-[10px] rounded-t-full bg-slate-600"></div>
        </div>
      </div>
    </div>
    <div class="absolute left-1/2 top-1/2 h-[80px] w-[150px] -translate-x-1/2 translate-y-3 overflow-hidden rounded-b-full bg-slate-600">
      <div class="absolute left-[10px] h-[20px] w-[100px] rounded-b-lg bg-white"></div>
      <div class="absolute right-[10px] h-[20px] w-[20px] rounded-b-md bg-white"></div>
      <div class="absolute left-1/2 top-3/4 h-[40px] w-[50px] -translate-x-1/2 rounded-3xl bg-red-500"></div>
    </div>
  </div>
</div>

Result: