JSFiddle - React, Tailwind, and code Playground

by Esther Mun

HTML

<body>
    <p id="title">List of Public Libraries in Toronto:</p>
    <button id="show">Show</button>
    <button id="hide">Hide</button>
    <p id="library_names"></p>
    <p id="show_info"></p>
    <p id="print_neighborhood"></p>
    <p id="location"></p>
</body>

CSS

p {
    font-family:"Georgia", Arial, Verdana;
    font-size: 15px;
    text-indent: 15px;
    line-height: 130%;
}
#title {
    font-weight: bold;
    color: #3333CC;
}
button {
    font-family:"Georgia", Arial, Verdana;
    margin-left: 50px;
}
#show_info {
    border: 1px dotted #3333CC;
    padding:10px;
    margin:25px auto 15px auto;
    background:#CCFF99;
}
#print_neighborhood {
    border: 1px solid #A00000;
    padding: 10px;
    margin:auto;
    width: 300px;
    background:#E8E8E8;
}
#location {
    border:2px dotted #663399;
    border-radius: 15px;
    box-shadow: 2px 2px 5px #FF0066;
    padding:10px;
    margin: 20px auto 20px auto;
    width: 350px;
}

JavaScript

var libraryList = {
    "results": [{
        "address_components": [{
            "long_name": "Bloor/Gladstone Library",
                "short_name": "Bloor/Gladstone Library",
                "types": ["point_of_interest", "establishment"]
        }, {
            "long_name": "1101",
                "short_name": "1101",
                "types": ["street_number"]
        }, {
            "long_name": "Bloor Street West",
                "short_name": "Bloor St W",
                "types": ["route"]
        }, {
            "long_name": "Dufferin Grove",
                "short_name": "Dufferin Grove",
                "types": ["neighborhood", "political"]
        }, {
            "long_name": "Old Toronto",
                "short_name": "Old Toronto",
                "types": ["sublocality", "political"]
        }, {
            "long_name": "Toronto",
                "short_name": "Toronto",
                "types": ["locality", "political"]
        }, {
            "long_name": "Toronto Division",
                "short_name": "Toronto Division",
                "types": ["administrative_area_level_2", "political"]
        }, {
            "long_name": "Ontario",
                "short_name": "ON",
                "types": ["administrative_area_level_1", "political"]
        }, {
            "long_name": "Canada",
                "short_name": "CA",
                "types": ["country", "political"]
        }, {
            "long_name": "M6H 1M7",
                "short_name": "M6H 1M7",
                "types": ["postal_code"]
        }],
            "formatted_address": "Bloor/Gladstone Library, 1101 Bloor Street West, Toronto, ON M6H 1M7, Canada",
            "geometry": {
            "location": {
                "lat": 43.6600221,
                    "lng": -79.43405849999999
            },
                "location_type": "APPROXIMATE",
                "viewport": {
                "northeast": {
                    "lat": 43.6613710802915,
           ...