JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}


div#contenedor_principal {
width: 453px;
height: 250px;
margin: 0 auto;
}


div#contenedor_principal > div#contenedor_slider{
border: 1px solid #000;
width: 400px;
height: 250px;
background: #000;
margin: 0 auto;
overflow: hidden;
}


div#contenedor_principal > span.flecha{
z-index: 99;
width: 60px;
height: 61px;
top: 100px;
position: absolute;
cursor: pointer;
}


div#contenedor_principal > span.der{
right: -9px;
background-image: url('http://img197.imageshack.us/img197/6796/flechasy.png');
background-repeat: no-repeat;
background-position: -60px 0;
}


div#contenedor_principal > span.izq{
left: -9px;
background-image: url('http://img197.imageshack.us/img197/6796/flechasy.png');
background-repeat: no-repeat;
background-position: 0 0;
}


div#contenedor_principal > div#contenedor_slider div#slider{
width: 200%; /* este width es sobrescrito en el onload. es equivalente a 2 imágenes */
position: relative;
left: 0;
top: 0;
}


div#contenedor_principal > div#contenedor_slider div#slider img {
width: 400px; /* mismo width de #contenedor_slider */
height: 250px; /* mismo height de #contenedor_slider */
float: left;
}
</style>
<script type="text/javascript">
var namespaceSlider = {

Evento: function(elemento,nomevento,funcion) {
  	if (elemento.attachEvent) {
      		var fct=function(){
        		funcion.call(elemento,window.event);
    		}
    		elemento.attachEvent('on'+nomevento,fct);
    		return true;
	} else if (elemento.addEventListener) {
      			elemento.addEventListener(nomevento,funcion,false);
      			return true;
    	} else {
      	return...