JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<div id="placeholder">

</div>

JavaScript

var newElement = function(tag, config){
  var element = document.createElement(tag || 'div');
  if(config){
    Object.assign(element, config);
  }
  return element;
}

var CarouselControl = function(slide){
  var elementConfig = {
    className: 'carousel-control',
    href: '#carouselId'
  }
  var control = newElement('a', elementConfig);
  control.dataset.slide = slide;
  control.appendChild(newElement('i', {className: 'fa fa-caret-' + (slide == 'next' ? 'right' : 'left')}));
  control.appendChild(arrowIcon);
	return control;
}

var placeHolder = document.getElementById('placeholder')

placeHolder.append(new CarouselControl('next'))