JSFiddle - React, Tailwind, and code Playground

by silb3r

HTML

<div class="aspect-ratio-box">
Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio. Hello I have an aspect ratio.
</div>

CSS

.aspect-ratio-box {
  background: #ccc;
}
.aspect-ratio-box::before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-top: 56.25%;
}
.aspect-ratio-box::after { /* to clear float */
  content: "";
  display: table;
  clear: both;
}