JSFiddle - React, Tailwind, and code Playground

HTML

<div class="proportion">
    <div class="content">정사각형</div>
</div>

CSS

.proportion {
    position: relative;
    width: 200px; /* 가로 크기 지정 */
} 

.proportion:before {
    content: "";
    display: block;
    padding-top: 100%; /* 정사각형일 경우 */
} 

.content { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #0ff
}