How to create semi circle with tailwind

Question

I am trying to create a semicircle with a tailwind but I can't seem to find another way but this one.

<div className="relative  ">
  <div className="bg-black h-36 w-36 rounded-full absolute top-[50px] left-[555px] "></div>
  <div className="bg-white h-24 w-36 absolute top-[110px] left-[555px]   "></div>
</div>

is there any better way u know cuz this feels a little off, I feel like there are other better ways to do it

Answer 1

There is a way to do so using rounded-tr and rounded-tl here is what You need to do:

<script src="https://cdn.tailwindcss.com"></script>
<div class="relative flex justify-center items-center h-screen w-screen">

<div class="h-12 w-24 bg-indigo-500 
            rounded-tl-full rounded-tr-full "></div>
</div>