<main>
  <div id="gasses">
    <div class="gas he">
      <span class="number">2</span>
      <h2 class="symbol">He</h2>
      <p class="name">Helium</p>
    </div>
    <div class="gas ne">
      <span class="number">10</span>
      <h2 class="symbol">Ne</h2>
      <p class="name">Neon</p>
    </div>
    <div class="gas ar">
      <span class="number">18</span>
      <h2 class="symbol">Ar</h2>
      <p class="name">Argon</p>
    </div>
    <div class="gas kr">
      <span class="number">36</span>
      <h2 class="symbol">Kr</h2>
      <p class="name">Krypton</p>
    </div>
    <div class="gas xe">
      <span class="number">54</span>
      <h2 class="symbol">Xe</h2>
      <p class="name">Xenon</p>
    </div>
  </div>
</main>
/* 
  Font: "Neon Glow" by weknow 
  (https://www.fontspace.com/neon-glow-font-f14014) 
*/
@font-face {
  font-family: 'Neon Glow';
  src: url(https://assets.codepen.io/230569/NeonGlow-8VLz.ttf);
}

* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  background-color: #101010;
  box-sizing: border-box;
}

main {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

#gasses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
  > * {
    margin: 2rem;
  }
}

.gas {
  --blur: 1.75rem;
  --box-blur: calc(0.5 * var(--blur));
  --glow: var(--color);
  --size: 12rem;
  
  align-items: center;
  border-radius: 12px;
  border: 4px solid currentColor;
  box-shadow: 
    /* --- "glass" tube --- */
    /* inside */ inset 0 0 0 2px rgba(0, 0, 0, 0.15),
    /* outside */      0 0 0 2px rgba(0, 0, 0, 0.15),
    /* --- glow --- */
    /* inside */ inset 0 0 var(--box-blur) var(--glow),
    /* outside */      0 0 var(--box-blur) var(--glow);
  color: var(--color, white);
  display: inline-flex;
  flex-direction: column;
  font-family: system-ui, sans-serif;
  height: var(--size);
  justify-content: space-around;
  padding: 1rem;
  width: var(--size);
  
  > * {
    margin: 0;
    padding: 0;
  }
  
  .number { 
    font-weight: 700; 
  }
  
  .symbol { 
    font-size: 4rem; 
    font-family: 'Neon Glow';
    text-shadow: 0 0 var(--blur) var(--glow);
  }
  
  &.he { --color: #FCEAAC; filter: saturate(175%); }
  &.ne { --color: #FDA802; filter: brightness(110%); }
  &.ar { --color: #E555C7; filter: brightness(125%); }
  &.kr { --color: #B7E7F7; filter: saturate(200%); }
  &.xe { --color: #C4C4C6; filter: brightness(105%); }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.