<ul class="grid height-100vh">
  <li class="col-6">
    <div class="bg-light shadow-ring shadow-md inner-glow"></div>
  </li>
  
  <li class="bg col-6" data-theme="dark">
    <div class="bg-light shadow-ring shadow-md inner-glow"></div>
  </li>
</ul>
li {
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  aspect-ratio: 1/1;
  width: min(250px, 70%);
  border-radius: var(--radius-md);
}

External CSS

  1. https://unpkg.com/codyframe/main/css/reset.css
  2. https://unpkg.com/codyframe/main/css/typography.css
  3. https://unpkg.com/codyframe/main/css/icons.css
  4. https://unpkg.com/codyframe/main/css/util.css

External JavaScript

This Pen doesn't use any external JavaScript resources.