I have a problem that I don’t understand how to solve.
I have radio buttons to which I have added Tailwind CSS classes and on a pc they look correct, but from a phone, in Sarafi browser they have a different look. How can I achieve an identical design as on pc? Attached images

<div class="cursor-pointer border-b border-t py-4 px-4">
  <div class="flex items-center justify-between">
    <div class="flex items-center space-x-2"><input class="border-accent-black h-4 w-4 cursor-pointer rounded-full accent-black" type="radio" id="1" name="shipping_method_id" value="1" checked="" /><label class="cursor-pointer font-medium">Shipping</label></div>
    <div class="flex gap-1 font-medium uppercase"><span>FREE</span></div>
  </div>
  <p class="mt-1 pl-6 text-gray-500"></p>
</div>

Minimal representation:
https://play.tailwindcss.com/XK7kJMsOms

I expect to get a look identical to the PC version