JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-button">
<span class="text-in">GRAPHIC DESIGN</span>

</div>

CSS

.main-button {
       border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    background-color: transparent;
    border: solid 1px black;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-bottom: none;
    position: relative;
}

span.text-in {
      font-family: 'Playfair Display';
    font-weight: 600;
    position: absolute;
    bottom: 0;
    left: -4px;
    /* right: 44px; */
    background: transparent;
    z-index: 5;
}