JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<p>Method 1</p>
<span></span>
<p>Method 2</p>
<div><strong></strong></div>

CSS

/* Method 1 */

span {
  display: block;
  background: yellow;
  width: 33.3%;
  height: 0;
  padding-top: 33.3%;
}

/* Method 2 */

div {
  display: block;
  width: 33.3%;
}

strong {
  display: block;
  width: 100%;
  padding-top: 100%;
  background: orange;
}