JSFiddle - React, Tailwind, and code Playground

by berrym

HTML

<div class="card">
             <div class="content">
                    
            </div>
            <div class="cta-circle">
                <div class="cta"></div>    
            </div>
           
    </div>

CSS

.card{
  --cta-size: 72px;
  width: 600px;
  height: 140px;
  display: flex;
  background: #F7F2EA;
  border-radius: 20px;
}
.content{
  width: 100%;
  background:
    radial-gradient(circle at calc(100% - 40px) calc(100% - 40px), blue 40px, #0000 40px),
    radial-gradient(circle at calc(100% - 20px) calc(100% - 100px), red 20px, #0000 20px),
    linear-
}
.cta-circle{
  align-self: flex-end;
  background: #FFD03B;
  border-radius: 50%;
}
.cta{
  margin: auto;
  width: var(--cta-size);
  height: var(--cta-size);
}