JSFiddle - React, Tailwind, and code Playground

HTML

<div class="user_body_content_container">
    <div class="subject_container" id="subject_container0" index="0">
        <div class="subject" index= "0">
            <span class="subject_name">FIFA</span>
            <span class="subject_completion">55%</span>
        </div>
    </div>
</div>

CSS

.user_body_content_container
{
    display: table;
}

.subject_container
{
    width: 200px;
    height: 250px;
    border: 1px solid #eee;
    display: table-cell;
}

.subject
{
    border-radius: 50%;
    border: 1px solid #653;
    width: 175px;
    height: 175px;
    margin: auto;
    margin-top: 100%;
}

.subject span
{ 
    display: table-cell;
    vertical-align: center;
}