JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div class="square">
  <div class="square__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, neque. Eaque, et voluptates fuga. Nemo vel aut saepe mollitia, architecto similique nulla assumenda modi labore. Molestias earum, quasi fugiat est!
  </div>
</div>

SCSS

.square {
  width: 100%;
  max-width: 600px;
  position: relative;
  
  &::before {
    content: '';
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    display: block;
  }
  
  &__content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: black;
    color: white;
  }
}