{/* TODO: hide this behind an overscroll animation........... somehow.  */}
<div class="@container relative overflow-hidden not-supports-container:hidden">
  {/* The weird bottom-0 approach I used here avoids some rounding problems on low-dpi screen  */}
  <div class="absolute h-full bottom-0 left-0 right-0 bg-yellow"></div>
  <div class="absolute h-3/4 bottom-0 left-0 right-0 bg-orange"></div>
  <div class="absolute h-1/2 bottom-0 left-0 right-0 bg-red"></div>
  <div class="absolute h-1/4 bottom-0 left-0 right-0 bg-purple"></div>
  <div
    class="relative font-semibold tracking-tighter text-light-80 dark:text-dark-100 select-none text-center"
    style="font-size:28cqi;line-height:0.718;"
  >
    VideoJS
  </div>
</div>