JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rect">&nbsp;
<span class="circle-helper"><span class="circle"></span></span></div>

CSS

.rect
{
    height: 85vh;
		position: relative;
    background-color: red;
    width: 60vw;
}

.circle-helper{
			display: block;
			width: 100%;
			padding-bottom: 50%;
			bottom: 0;
			left: 0;
			overflow: hidden;
			position: absolute;
			background-color: transparent;
				
				}
		.circle{
			display: block;
			width: 100%;
			padding-bottom: 100%;
			// height: 500px;
			bottom: 0;
			left: 0;
			overflow: hidden;
			position: absolute;
			background-color: transparent;
		}

		.circle:after{
			box-sizing: content-box;
			content: '';
			width: 100%;
			height: 100%;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			background: rgba(0,0,0,0);
			position: absolute;
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
			border: 300px solid blue;
			}
			top: 50%
			left: 50%
			border: 300px solid blue