JSFiddle - React, Tailwind, and code Playground

by JaapMoolenaar

HTML

<span class='box'>
 <span class='height'></span>
 <span class='content'>1:1</span>
</span>

<span class='box'>
 <span class='height'></span>
 <span class='content'>This is just a longer text to demonstrate multiple lines being centered.</span>
</span>

<span class='box ratio2_1'>
 <span class='height'></span>
 <span class='content'>2:1</span>
</span>

CSS

.box {
                /* width */
                width: 25%;
    
                display: table;
            }
            .height {
                display: table-cell;
    
                /* The height for this item will become this %-age of the width of the .box, so this is 1:1 ratio */
                padding-top: 100%;
            }
            .content {
                display: table-cell;
    
                vertical-align: middle;
                text-align: center;
            }

            /* Other ratios */
            .ratio2_1 .height {
                padding-top: 50%;
            }
            .ratio1_2 .height {
                padding-top: 200%;
            }
            .ratio4_3 .height {
                padding-top: 75%;
            }
            .ratio16_9 .height {
                padding-top: 56.25%;
            }
    
            /* Some styles... */
            @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
            body {
                font-family:'Open Sans', sans-serif;
                font-size: 1.2em;
                font-weight: 700;
            }
           .box {
               float: left;
               margin: 1%;
            }
            .content {    
                background-color: #9c9;
                color: #fff;
                text-shadow: 1px 1px #666;
                box-shadow: 0px 0px 1px 1px #666;
                border: 2px solid;
            }