JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<div class="r">
    <div class="aside">

 
        <div data-set="map" class="small-medium map-sliver-container maps-page-map">
            
        </div>
 


<div class="large-icon-accordion">
    <ul>
        <li class="nearby">
            <a href="?Input=Current+location+" class="with-subtext">
                <span class="mini-map">&nbsp;</span>
                Nearby
                <span class="subtext">Near your current location</span>
            </a>
        </li>

    <li class="tube">
        <a href="/maps/track/tube" class="">
            <span class="mini-map">&nbsp;</span>
            Tube

        </a>
    </li>
    <li class="dlr">
        <a href="/maps/track/dlr" class="">
            <span class="mini-map">&nbsp;</span>
            DLR

        </a>
    </li>
    <li class="overground">
        <a href="/maps/track/overground" class="">
            <span class="mini-map">&nbsp;</span>
            Overground

        </a>
    </li>
    <li class="rail">
        <a href="/maps/track/national-rail" class="">
            <span class="mini-map">&nbsp;</span>
            National Rail

        </a>
    </li>
    <li class="tram">
        <a href="/maps/track/tram" class="">
            <span class="mini-map">&nbsp;</span>
            Tram

        </a>
    </li>
    </ul>
</div>
        
    </div>
    <div class="main large">
        <div data-set="map" class="map-sliver-container"><div class="moving-source-order">
<div class="map-sliver" data-sliver-target="#schematic-map" style="overflow: hidden;"><div class="panzoom-wrapper" tabindex="0"><img id="schematic-map" src="/cdn/static/cms/images/london-rail-and-tube-services-map-250.gif" alt="schematic map" class="content" data-margin-width="0" data-margin-height="2.539076118535746" style="transform: matrix(0.205984892504358, 0, 0, 0.205984892504358, -1366.5, -896.960923881464); cursor: move; transition: none; -webkit-transition: none; margin-top: -48px; margin-left: 0px;"><button title="Zoom in"...

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: arial;
    font-size: 15px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: bottom;
    font: inherit;
    font-size: 100%;
    line-height: 153.33%;
}
.r {
    max-width: 1140px;
    min-width: 300px;
    position: relative;
    display: block;
    margin: 0 auto;
    *zoom: 1:;
}
.r::before, .r::after {
    content:" ";
    display: table;
}
.r::after {
    clear: both;
}
#full-width-content .r {
    margin-bottom: 10px;
}
#container {
    min-width: 300px;
    overflow: hidden;
}
body {
    line-height: 1;
}
body {
    background-color: #FFF;
    color: #2d3039;
}
html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.main, .aside, .equal-weight > div, .tw-buttons.horizontal-toggle-buttons li.halfs, .tw-buttons.horizontal-toggle-buttons li.full {
    float: left;
    margin: 0 0 0 2.54%;
    width: 94.86%;
}
.aside, .one-row.main-and-aside .aside, .main-and-aside-large-upwards .aside, .equal-weight > div {
    float: left;
    margin: 0 0 0 2.54%;
    width: 29.92%;
}
.r > :first-child {
    margin-left: 2.54%;
}
.large {
    display: none;
}
.large {
    display: none;
}
.main, .one-row.main-and-aside .main, .main-and-aside-large-upwards .main, #more-journey-options {
    float: left;
    margin: 0 0 0 2.54%;
    width: 62.39%;
}
.large {
    display:...