JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">  
        
            <div class="boxtext">
            
                <div class="insidetext"> 
                
                <ul>
                    <li>WATER</li>
                    <li>JUICE</li>
                    <li>TEA</li>
                </ul>
                
                </div>
            
            
            </div>
        </div>

CSS

.left {
    @include aspect-ratio(16,9);
    width: 50%;
    height: 100vh;

    min-width: 300px;
    position: relative;
    background-size: cover;
    background-color:#333;
    position: relative;
}

@media (max-width:768px) {
    .left {
        width: 100%;
        height: 70vh;
    }
}

.boxtext {
    @include aspect-ratio(16,9);
    border: solid white 0.15em;
    height: 70vh;
    width: 70%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;

}

@media (max-width:768px) {
    .boxtext {
        width: 70%;
        height: 70%;
    }
}
.insidetext {
    @include aspect-ratio(16,9);
    background-color: aliceblue;
    height: 70%;
    width: 70%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    font-size: 9vh;
    text-align: center;
    min-height:100px;
}
.insidetext li {
    list-style-type:none;
    
}
.insidetext ul {
    display: table;
    margin: 0 auto;
}
.insidetext ul,li {
     list-style-type: none;
     list-style-position:inside;
     margin:0 auto;
     padding:0;
    vertical-align:middle;
}