JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<div class="wrapper">
  <header>
    <h1 title="untitled" >
      <div class="word">

<div class="letter M">
      <p>M</p>
      <div class="element rect"></div>
      <div class="element rect-corner-top-right"></div>
      <div class="element rect-corner-top-right"></div>
    </div>

    <div class="letter E">
          <p>E</p>
          <div class="element rect"></div>
          <div class="element corner-bottom-left"></div>
          <div class="element corner-top-left"></div>
          <div class="element circle"></div>
        </div>

    <div class="letter R">
      <p>R</p>
      <div class="element rect"></div>
      <div class="element semi-circle-right"></div>
      <div class="element corner-top-right"></div>
    </div>
     <div class="letter G">
      <p>G</p>
      <div class="element rect-corner-left"></div>
      <div class="element corner-bottom-left"></div>
      <div class="element rect-corner-top-left-bottom-right-20-43"></div>
    </div>

    <div class="letter I">
      <p>I</p>
      <div class="element rect"></div>
    </div>

  <div class="letter M">
      <p>M</p>
      <div class="element rect"></div>
      <div class="element rect-corner-top-right"></div>
      <div class="element rect-corner-top-right"></div>
    </div>
    <br>

        <div class="letter T">
          <p>T</p>
          <div class="element corner-bottom-right"></div>
          <div class="element rect"></div>
          <div class="element corner-bottom-left"></div>
        </div>


        <div class="letter E">
          <p>E</p>
          <div class="element rect"></div>
          <div class="element corner-bottom-left"></div>
          <div class="element corner-top-left"></div>
          <div class="element circle"></div>
        </div>

      <div class="letter U">
          <p>U</p>
          <div class="element rect-corner-bottom-left"></div>
          <div class="element rect"></div>
        </div>
      <div class="letter T">
          <p>T</p>
         ...

CSS

/*
Project Name: untitled
Description: Pure CSS font #6 - This project is based on the typographic project "Enso" by Tamer Koseli (http://cargocollective.com/tamerkoseli/Enso-Typeface - http://tamerkoseli.com/)
Author: @c4rin3
Author URI: http://c4rin3.vituelles.fr
*/

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-size: 20px;
  background: #000;
  font-family: helvetica, arial, sans-serif;
  text-align: center;
}

/* WRAPPER DECO */
.wrapper {
  position: relative;
  margin: 5% auto;
  width: 80%;
  padding: 5%;
  background: #000;
  overflow: hidden;
}
.wrapper::before {
  content: '';
}
.wrapper::after {
  content: '';
}
.container::before {
  content: '';
}
.container::after {
  content: '';
}

header, .container, footer {
  margin: 0 auto;
  width: 100%;
}
header {
  padding: 0 0 3em 0;
}
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.word {
  font-size: 10px;
  display: inline-block;
}

/* LETTERS SPEC.
-------------------------------------------------- */
.letter {
  width: 4.3em; /* 43px = body font size 10px * 4.3 */
  height: 6.6em; /* 66px =  body font size 10px * 6.6 */
  margin: 2em 0.5em ;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
/*.letter:hover {
  cursor: pointer;
  background: grey;
}*/
.word .letter {
  margin: 1em 0.5em;
}
.letter p {
  font-size: 150em;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  opacity: 0.2;
  color: #222;
  display: none;
}


/* ELEMENTS BASE
-------------------------------------------------- */
.element {
  margin: 0;
  position: absolute;
  border:none;
  /* DEFINE PRIMARY COLOR */
  background: black;
}
.element.color-2 {
  /* DEFINE 2nd COLOR */
  background: #FCEE21;
}

/* RECTANGLE 20x66
-------------------------------------------------- */
.rect {
  width: 2em; /* 20 px = body font size 10px x 2 */
 ...