Flights table like characters

by Konstantin Rouda

HTML

<section class="c-container" id="container">

</section>

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(237, 237, 237);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

.c-container {
  max-width: 48rem; /*~778px*/
  padding: 1rem 0;
  text-align: center;
  background: rgba(35, 35, 38, 1);
  border: 1px solid;
}

/*Actual Style*/
.o-letter {
  position: relative;
  display: inline-block;
  min-width: 6rem;
  min-height: 8rem;
  vertical-align: bottom;
  margin: 0 .1rem;
  line-height: 1;
  font-size: 8rem;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: .2rem;
  box-shadow: 0 0.0016em 0 0 rgba(255, 255, 255, .9), 0 0.012em 0 0 rgb(72, 77, 82),
  0 -0.005em 0 0 rgba(255, 255, 255, .9), 0 -0.007em 0 0 rgb(72, 77, 82);
  color: rgb(247, 246, 246);
  background: linear-gradient(rgb(54, 58, 62) 54%, rgb(84, 84, 85) 0);
}


.o-letter::after { /*middle line*/
    content: "";
    position: absolute;
    left: 0;
    height: .06rem;
    width: 100%;
    top: 54%;
    transform: translateY(-50%);
    background: linear-gradient(rgb(29, 26, 26) 60%, rgb(223, 219, 219) 70%);
}

JavaScript

;(function () {
	"use strict";
  
  const container = document.getElementById("container");
  
  const WORD = "rg8b6 "; 
  const LETTER_WRAPPER_CLASS = "o-letter";
  
  const wordArr = WORD.split(""); 
  const docFrag = document.createDocumentFragment();
  
  wordArr.forEach(function (letter) {
  		docFrag.appendChild(createLetterWrapper(letter, LETTER_WRAPPER_CLASS));
  });  
  
  container.appendChild(docFrag);

  
  /*Utility Functions*/
  function createLetterWrapper(letter, wrapperClass) {
      const wrapper = document.createElement("span");
      wrapper.classList.add(wrapperClass);
      wrapper.textContent = letter.trim() || "";
      return wrapper;
  };
  
  
})();