JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">
<div class="header">
    
    </div>
    </div>

CSS

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    background: linear-gradient(to top, #ff310f 0%, #f52727 17%, #dd127b 79%);
    height: 110px;
    z-index: 999;
}

.circle {
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background: linear-gradient(to top, #ff310f 0%, #f52727 17%, #dd127b 79%);
    margin: auto;
    position: absolute;
    top:50px;
    z-index: 999;
    
}