Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    - elements = ["html","base","head","link","meta","script","style","title","body","address","article","aside","footer","header","h1","h2","h3","h4","h5","h6","hgroup","main","nav","section","blockquote","cite","dd","dt","dl","div","figcaption","figure","hr","li","ol","ul","menu","p","pre","a","abbr","b","bdi","bdo","br","code","data","dfn","em","i","kbd","mark","q","rp","ruby","rt","s","samp","small","span","strong","sub","sup","time","u","var","wbr","area","audio","img","map","track","video","embed","iframe","object","picture","source","portal","svg","canvas","noscript","del","ins","caption","col","colgroup","table","tbody","tr","td","tfoot","th","thead","button","datalist","option","fieldset","label","form","input","legend","meter","optgroup","select","output","progress","textarea","details","summary","dialog","slot","template","acronym","applet","bgsound","big","blink","center","dir","font","frame","frameset","image","keygen","marquee","menuitem","nobr","noembed","noframes","param","plaintext","rb","rtc","spacer","strike","tt","xmp"]
 
.cards
  each element in elements
    .card= `<${element}>`
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.light.min.css" layer(demo.support);

@keyframes slide-fade-in {
  from {
    opacity: 0;
    box-shadow: none;
    transform: scale(.8) translateY(15vh);
  }
}

@layer demo {
  .card {
    @media (prefers-reduced-motion: no-preference) {
      view-timeline-name: --item-timeline;
      animation: slide-fade-in both;
      animation-timeline: --item-timeline;
      animation-range: contain 0% contain 50%;
    }
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

html {
    block-size: 100%;
    background: var(--surface-3);
  }

body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

display: grid;
    place-content: center;
    padding-block: 30dvh;
  }
  
  .cards {
    display: grid;
    gap: var(--size-3);
    grid-auto-flow: dense;
    grid-template-columns: repeat(3, var(--size-content-1));
    
    & > .card {
      background: linear-gradient(#fff, #fff), var(--gradient-10);
      background-origin: border-box;
      background-clip: content-box, border-box;
      border-radius: var(--radius-3);
      box-shadow: var(--shadow-3);
      line-height: 3;
      padding-top: var(--size-1);
      font-size: var(--font-size-4);
      font-weight: var(--font-weight-6);
      font-family: var(--font-mono);
      display: grid;
      place-content: center;
      
      &:nth-of-type(4n) {
        grid-row: span 2;
        background-image: linear-gradient(#fff, #fff), var(--gradient-3);
      }
      
      &:nth-of-type(7n) {
        grid-row: span 3;
        background-image: linear-gradient(#fff, #fff), var(--gradient-5);
      }
      
      &:nth-of-type(5n) {
        grid-column: span 2;
        background-image: linear-gradient(#fff, #fff), var(--gradient-18);
      }
    }
  }
}

Frontend Forever App