JSFiddle - React, Tailwind, and code Playground

HTML

<section class="main">
    <div id="greeting">
          <p>Hi, This is the greeting part of my site.</p>
      </div>
    </section>

CSS

#greeting{
	position: relative;
	height:450px;
	width:450px;
	border-radius: 50%;
	background-color: #779EC6;
	text-align: center;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}