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:
