JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>

Babel + JSX

const arrowUp = document.createElement('i');
const arrowLeft = document.createElement('i');
const arrowDown = document.createElement('i');
const arrowRight = document.createElement('i');
const container = document.createElement('div');
const body = document.body;

TweenMax.set(body, {
	backgroundColor: '#383A3F',
	margin: 0,
  overflow: 'hidden',
  padding: 0
});

TweenMax.set(container, {
	left: '50%',
	position: 'absolute',
  top: '50%',
  xPercent: -50,
  yPercent: -50
});

TweenMax.set(arrowUp, {
	borderLeftWidth: '50px',
  borderLeftStyle: 'solid',
  borderLeftColor: 'transparent',
  borderRightWidth: '50px',
  borderRightStyle: 'solid',
  borderRightColor: 'transparent',
  borderBottomWidth: '100px',
  borderBottomStyle: 'solid',
  borderBottomColor: '#fff1b9',
	display: 'block',
  height: 0,
  left: '50%',
  position: 'absolute',
  top: '50%',
	width: 0,
  xPercent: -50,
  y: -100,
  yPercent: -50
});

TweenMax.set(arrowDown, {
	borderLeftWidth: '50px',
  borderLeftStyle: 'solid',
  borderLeftColor: 'transparent',
  borderRightWidth: '50px',
  borderRightStyle: 'solid',
  borderRightColor: 'transparent',
  borderTopWidth: '100px',
  borderTopStyle: 'solid',
  borderTopColor: '#fff1b9',
	display: 'block',
  height: 0,
  left: '50%',
  position: 'absolute',
  top: '50%',
	width: 0,
  xPercent: -50,
  y: 100,
  yPercent: -50
});

TweenMax.set(arrowLeft, {
	borderTopWidth: '50px',
  borderTopStyle: 'solid',
  borderTopColor: 'transparent',
  borderBottomWidth: '50px',
  borderBottomStyle: 'solid',
  borderBottomColor: 'transparent',
  borderRightWidth: '100px',
  borderRightStyle: 'solid',
  borderRightColor: '#fdc23e',
	display: 'block',
  height: 0,
  left: '50%',
  position: 'absolute',
  top: '50%',
	width: 0,
  x: -100,
  xPercent: -50,
  yPercent: -50
});

TweenMax.set(arrowRight, {
	borderTopWidth: '50px',
  borderTopStyle: 'solid',
  borderTopColor: 'transparent',
  borderBottomWidth: '50px',
  borderBottomStyle: 'solid',
  borderBottomColor:...