JSFiddle - React, Tailwind, and code Playground

HTML

<div class="course-flex-row-2">
                <div>Read Chapter 1 to 3</div>
            </div>

SCSS

.course-flex-row-2 {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid red;
    
    div {
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top:50%;
    }
}