CodePen Embed - XvRjdM

<!DOCTYPE html>
<head></head>
<body>
 <title>
     LifeDots | The Game Of Life
 </title>
 
 <h1>
  This is your result.   
 </h1>

 <h3>
     Este es tu resultado.
 </h3>

  <div id="blueyears">
      <h5>years / años</h5>
    </div>

    <div id="greenyears">
        <h5>years / años</h5>
    </div>

    <div id="redyears">
        <h5>years / años</h5>
    </div>
 
 <a id="playagainbutton" href="index.html">
PLAY AGAIN </a>

 <a id="jugardenuevobutton" href="index.html">
JUGAR DE NUEVO
 </a>
</form>

</body>

body {
    font-family: Roboto, sans-serif;
    color: black;
}

h1 {
margin-bottom: 0%;    
font-weight: 100;   
font-size: 600%;
width: 100%;
text-align: center;   
}
h3 {
margin-top: 0%;  
font-weight: 100;   
font-size: 250%;
width: 100%;
text-align: center;   
}

#redyears, #blueyears, #greenyears {
      width: 300px;
      height: 300px;
      color:white;
      padding: 1%;
      border-radius: 50%;
      display: inline-block;
      }

#redyears {
      background: #CE2828;
      margin-left: 2%;
      margin-right: 2%;
}

#redyears h1 {
      width: 50%;
      height: 50%;
      margin-left: 17%;
      margin-right: 17%;
      margin-top: 17%;
      text-align: center;
      font-size: 1000%;
      }

#redyears h5 {
    font-size: 100%;
    text-align: center;
    }

#blueyears {
      background: #273389;
      margin-left: 5%;
      margin-right: 5%;
}

#blueyears h1 {
      width: 50%;
      height: 50%;
      margin-left: 17%;
      margin-right: 17%;
      margin-top: 17%;
      text-align: center;
      font-size: 1000%;
      }

#blueyears h5 {
    font-size: 100%;
    text-align: center;
    }   
    
#greenyears {
      background: #148A2F;
      margin-left: 5%;
      margin-right: 5%;
}

#greenyears h1 {
      width: 50%;
      height: 50%;
      margin-left: 17%;
      margin-right: 17%;
      margin-top: 17%;
      text-align: center;
      font-size: 1000%;
      }

#greenyears h5 {
    font-size: 100%;
    text-align: center;
    }   
      
#playagainbutton {
  float: left;
  font-size: 100%;
  font-weight: 100%;
  color: black;
  width: 20%;
  margin-left: 15%;
  margin-top: 5%;
  margin-bottom: 5%;
  border-style: solid;
  border-color: black;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  border-width: thin;
  text-align: center;
  text-decoration: none;
}
#playagainbutton:hover {
    color: white;
    background: black;
}

#jugardenuevobutton {
  float: right;
  width: 20%;
  font-size: 100%;
  font-weight: 100%;
  margin-left: 20%;
  margin-top: 5%;
  margin-bottom: 5%;
  margin-right: 15%;
  color: black;
  border-style: solid;
  border-color: black;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  border-width: thin;
  text-align: center;
  text-decoration: none;
}
#jugardenuevobutton:hover {
    color: white;
    background: black;
}

class BlueTime extends React.Component {
    render() {
        return (
            <h1 id="blueyearsh1">{localStorage.getItem("ageValue")}</h1>
        )
    }
} 

class GreenTime extends React.Component {
    render() {
        return (
            <h1 id="blueyearsh1">{localStorage.getItem("greenTime")}</h1>
        )
    }
} 

class RedTime extends React.Component {
    render() {
        return (
            <h1 id="blueyearsh1">{localStorage.getItem("redTime")}</h1>
        )
    }
} 

ReactDOM.render(<BlueTime/>, document.getElementById("blueyears"))
ReactDOM.render(<GreenTime/>, document.getElementById("greenyears"))
ReactDOM.render(<RedTime/>, document.getElementById("redyears"))

View Compiled

This Pen is owned by Santiago Pereira on CodePen.

See more by @sntgp on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript