JSFiddle - React, Tailwind, and code Playground

by Alvaro Montoro

HTML

<div class="canvas">
  <div class="hands"></div>
  <div class="arms"></div>
  <div class="leg"></div>
  <div class="leg"></div>
  <div class="body"></div>
  <div class="buttons"></div>
  <div class="belt"></div>
  <div class="beard"></div>
  <div class="head"></div>
  <div class="eyes"></div>
  <div class="cheeks"></div>
  <div class="mustache"></div>
  <div class="mustache"></div>
  <div class="hat"></div>
</div>

CSS

@keyframes snow {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  40% { background-position: 10px 14vmin, -20px 28vmin, 20px 20vmin, 10px 24vmin; }
  60% { background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin; }
  100% { background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin; }
}

html, body {
  background: #abc;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 50% 50%, white 2.5%, transparent 0),
    radial-gradient(circle at 30% 90%, white 1.5%, transparent 0),
    radial-gradient(circle at 70% 10%, white 1%, transparent 0),
    radial-gradient(circle at 10% 40%, white 1%, transparent 0);
  background-size: 45vmin 35vmin, 50vmin 70vmin, 60vmin 50vmin, 65vmin 60vmin;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: snow infinite 7s linear;
}

.canvas {
  --skin: #fca;
  --eyes: #630a;
  --cheeks: #f001;
  --beard: #eee;
  --mustache: #fff;
  --suit: #a00;
  --belt: #222;
  --belt-buckle: gold;
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.canvas::before {
  content: "";
  display: block;
  position: absolute;
  top: 90%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  background: white;
  transform: translate(-50%, 0) rotate(1deg);
  border-radius: 100% / 20%;
}

.head {
  position: absolute;
  top: 10%;
  left: 50%;
  border-radius: 50%;
  width: 25%;
  height: 25%;
  transform: translate(-50%, 0);
  background: var(--skin);
}

@keyframes blink {
  0%, 6%, 100% { height: 2%; }
  3% { height: 0%; }
}

.eyes {
  position: absolute;
  top: 24%;
  left: 45%;
  width: 2%;
  height: 2%;
  background: var(--eyes);
  transform: translate(0, -50%);
  border-radius: 50%;
  box-shadow: 6.66vmin 0 var(--eyes);
  animation: blink 5s infinite linear;
}

.cheeks {
  position: absolute;
  top: 25.5%;
  left: 43%;
  width: 5%;
  height: 3%;
  background: var(--cheeks);
  border-radius: 50%;
  box-shadow: 7.25vmin 0 var(--cheeks);
}


.beard...