JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
    <title>APP THE SUPERDRIVER</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- necesario para jQuery Mobile -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <link rel="stylesheet" href="estilos.css" type="text/css" /> <!-- incluimos la hoja de estilos -->
    <script type="text/javascript" charset="utf-8" src="api.js"></script>
    <script type="text/javascript" charset="utf-8" src="funciones.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>    <!-- incluimos el api de PhoneGap -->

</head>
<body>
    <div data-role="page"> <!-- jQuery Mobile: div que hará el papel de página de nuestra app -->
        <div data-role="content"> <!-- jQuery Mobile: div que hará el papel de contenedor -->
            <div id="div"> <!-- div que contiene la esfera central, la que marca la marcha recomendada -->
                <div class="contenido">1</div>
            </div>
            <div id="divSupIzq"> <!-- div que contiene la esfera superior izquierda , que marca la velocidad actual -->
                <div class="contenidos"><div id="textoDinamico">120 </div><div id="textoEstatico">KM/H</div></div>
            </div>
            <div id="divSupDer"> <!-- div que contiene la esfera superior derecha , que marca los avisos -->
                <div class="contenidos">zona de</br>avisos</div>
            </div>
            <div id="divInfIzq"> <!-- div que contiene la esfera inferior izquierda , que contiene información -->
                <div class="contenidos">zona de</br>informaci&oacute;n</div>
            </div>
            <div id="divInfDer"> <!-- div que contiene la esfera inferior derecha , que marca las alarmas -->
                <div...

CSS

@font-face {                     /*Fuente TRADE*/
    font-family: 'TradeGothic';
    src: url("TradeGothicLTStd-BdCn20.otf");
}
img.aceleracionBrusca{            /*Imágenes de las alarmas*/
    max-width: 120px;
    max-height: 80px;
    margin-top: -20px;
}
img.paradaProlongada{            /*Imágenes de las alarmas*/        
    max-width: 130px;
    max-height: 97px;
    margin-top: -35px;
}
.ui-navbar{                        /*Menú footer*/
    position: absolute;
    bottom: 0;
    width: 100%;
}
.ui-page{                        /*Página*/
    background:#2b2724;
}
.ui-content .contenido{            /*Contenido de la ESFERA CENTRAL*/
    color:#fff;
    text-align: center;
    margin-top:40px;
    font-size:76px;
    font-family:TradeGothic,Arial;
    color:#000;
    text-shadow: -1px 0px 1px #fff;
}
.ui-content .contenidos{            /*Contenido del RESTO DE ESFERAS*/
    color:#fff;
    text-align: center;
    margin: 0 auto;
    margin-top:35px;
}
#div{                            /*DIV que contiene la ESFERA CENTRAL*/
    position:absolute;
    top:50%;
    margin-top: -75px;
    left:50%;
    margin-left: -75px;
    background: #00A8D9;
    width: 160px;
    height: 160px;
    -moz-border-radius: 80px;
    -webkit-border-radius: 80px;
    border-radius: 80px;
    border:3px solid #000;
}
#divSupIzq,#divSupDer,#divInfIzq,#divInfDer{    /*DIVs que contienen el RESTO DE ESFERAS*/
    background: #ddd;
    width: 110px;
    height: 110px;
    -moz-border-radius: 110px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    border:3px solid #fff;
}

/* propiedades CSS a aplicar en ventanas de 480px o menos */
@media screen and (max-width: 480px) {
    #divSupIzq{
        top:10%;
        left:10%;
        position:absolute;
    }    
    #divInfIzq{
        bottom:10%;
        left:10%;
        position:absolute;
    
    }
    #divSupDer{
        top:10%;
        right:10%;
        position:absolute;
    }    
    #divInfDer{
        bottom:10%;
  ...