JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body style="background-color: rgb(230,230,230);">

    <div style="height: 500px;"></div>




    <div style="background-image: url('http://s24.postimg.org/7308f4byd/line.png'); background-repeat: no-repeat; background-size: 100% auto;" id="line">

        <div class="container">

           <div class="row">
                <div class="col-lg-12">
                        
                    <div id="liverpool-box">
                        <img src="http://s24.postimg.org/71qalpa4l/box.png">
                    </div>

                    <div id="kings-box">
                        <img src="http://s24.postimg.org/71qalpa4l/box.png">
                    </div>

                    <div id="london-box">
                        <img src="http://s24.postimg.org/71qalpa4l/box.png">
                    </div>

                    <div id="waterloo-box">
                        <img src="http://s24.postimg.org/71qalpa4l/box.png">
                    </div>

                    <div id="paddington-box">
                        <img src="http://s24.postimg.org/71qalpa4l/box.png">
                    </div>
   
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">

                    <div id="liverpool-circle" class="circle">
                        <a onclick="liverpool();">
                            <div class="circle">
                                <h3 class="numbers">3</h3>
                            </div>
                        </a>
                    </div>

                    <div id="kings-circle" class="circle">
                        <a onclick="kings();">
                            <div class="circle">
                                <h3 class="numbers">7</h3>
                            </div>
                        </a>
         ...

CSS

#liverpool-box {
    display: inline;
    height: ;
    left: 0%;
}
#kings-box {
    display: inline;
    left: 200%;
}
#london-box {
    display: inline;
    left: 300%;
}
#waterloo-box {
    display: inline;
    left: 400%;
}
#paddington-box {
    display: inline;
    left: 500%;
}
#victoria-box {
    display: inline;
    left: 600%;
}


#liverpool-circle {
    display: inline;
}
#kings-circle {
    display: inline;
}
#london-circle {
    display: inline;
}
#waterloo-circle {
    display: inline;
}
#padidngton-circle {
    display: inline;
}

.circle {
    border: 1px solid @light-blue;
    background-color: #FFFFFF;
    height: 100px;
    -moz-border-radius:75px;
    -webkit-border-radius: 75px;
    width: 100px;
    margin-right: 0;
}

.numbers {
    position: relative;
    top: 35%;
    left: 70%;
    font-size: 400%;
    transform: translate(-50%,-50%);
}







    a:hover {
        cursor: pointer;
        text-decoration: none;
    }

    

    .centre {
        width: 50%;
        margin: none;
    }

    .stations {
        display: inline-block;
        position: relative;
        top: ;
        left: ;
    }

    

    #central-rectangle {
      width: 50px;
      height: 15px;
      background: red;
    }

    #circle-rectangle {
      width: 50px;
      height: 15px;
      background: yellow;
    }

    #overground-rectangle {
      width: 50px;
      height: 15px;
      background: orange;
    }

    #met-rectangle {
      width: 50px;
      height: 15px;
      background: purple;
    }

    #hammersmith-rectangle {
      width: 50px;
      height: 15px;
      background: pink;
    }

    #liverpool {
        position: relative;
        left: %;
    }
    #kings {
        position: relative;
        left: 5%;
    }
    #london {
        position: relative;
        left: 5%;
    }
    #waterloo {
        position: relative;
        left: 10%;
    }
    #paddington {
        position: relative;
        left: 25%;
    }
    #victoria {
       ...

JavaScript

var livBox = document.getElementById("liverpool-box");
var kingBox = document.getElementById("kings-box");
var lonBox = document.getElementById("london-box");
var waterBox = document.getElementById("waterloo-box");
var padBox = document.getElementById("paddington-box");
var vicBox = document.getElementById("victoria-box");

var livWriting = document.getElementById("liverpool-writing");
var kingWriting = document.getElementById("kings-writing");
var lonWriting = document.getElementById("london-wriitng");
var waterWriting = document.getElementById("waterloo-wriitng");
var padWriting = document.getElementById("paddington-writing");
var vicWriting = document.getElementById("victoria-writing");

function liverpool() {
	livBox.style.display="inherit";
	kingBox.style.display="none";
	lonBox.style.display="none";
	waterBox.style.display="none";
	padBox.style.display="none";
	vicBox.style.display="none";

	livWriting.style.color="@gold";

	return false;
}

function kings() {
	livBox.style.display="none";
	kingBox.style.display="inherit";
	lonBox.style.display="none";
	waterBox.style.display="none";
	padBox.style.display="none";
	vicBox.style.display="none";
	return false;
}

function london() {
	livBox.style.display="none";
	kingBox.style.display="none";
	lonBox.style.display="inherit";
	waterBox.style.display="none";
	padBox.style.display="none";
	vicBox.style.display="none";
	return false;
}

function waterloo() {
	livBox.style.display="none";
	kingBox.style.display="none";
	lonBox.style.display="none";
	waterBox.style.display="inherit";
	padBox.style.display="none";
	vicBox.style.display="none";
	return false;
}

function paddington() {
	livBox.style.display="none";
	kingBox.style.display="none";
	lonBox.style.display="none";
	waterBox.style.display="none";
	padBox.style.display="inherit";
	vicBox.style.display="none";
	return false;
}

function victoria()...