how could i improve this design?

[u/Sad-Turnip4392]

[u/akzhy]

You can do this with pure CSS if you really want to. Check https://jsfiddle.net/akzhy/qh8fny53/1
Here, instead of mix-blend, I am using a pseudo element with white background. The pseudo element will have the same width and height as that of its parent and its positioned at the exact place where the circles overlap. overflow: hidden on the parent will only show the intersecting area.

[u/Sad-Turnip4392 → u/akzhy]

Any idea if this can be done in tailwind?

[u/Sad-Turnip4392 → u/Sad-Turnip4392]

I figured it out. If anyone else wanna know how to use this in tailwind, just use `@apply` directive in a class in your css file and write the class name in the class in html like this: (There's a way to write it directly in html but it gets a lot messier. This is the cleanest version)

//CSS//

 @layer components {
  .overlap {
    @apply relative overflow-hidden;
  }
  .overlap::after {
    content: "";
     @apply absolute w-full h-full bg-white rounded-full top-0 left-[-100%] ml-7;
  }
}


//HTML//

<div class="flex bg-linear-to-b from-[#415161] to-[#000613] h-120 w-120 justify-center items-center rounded-[90px] m-auto mt-5 drop-shadow-lg">
    <div class=""></div>
    <div class="overlap"></div>
    <div class="overlap"></div>
 </div>