JSFiddle - React, Tailwind, and code Playground

by aprilkw

HTML

<body>
    <p id="title">Major Museum in Ontario</p>
    <p id="museum_info"></p>
</body>

CSS

p {
    font-family:"Verdana", Arial, Sans Serif;
    font-size: 18px;
    text-indent: 15px;
    line-height: 130%;
    color: #9c7d57;
    margin: auto;
}
#title {
    font-weight: bold;
    color: #9c7d57;
    margin: auto;
    width: 290px;
}
#museum_info {
    border:4px dotted #60a8a1;
    border-radius: 20px;
    box-shadow: 2px 2px 5px #b4d9ce;
    padding:10px;
    margin: 20px auto 20px auto;
    width: 550px;
}

JavaScript

var torontoMuseum = {
    "results": [{
        "address_components": [{
            "long_name": "Spadina Museum",
                "short_name": "Spadina Museum",
                "types": ["point_of_interest", "establishment"]
        }, {
            "long_name": "285",
                "short_name": "285",
                "types": ["street_number"]
        }, {
            "long_name": "Spadina Road",
                "short_name": "Spadina Rd",
                "types": ["route"]
        }, {
            "long_name": "Midtown Toronto",
                "short_name": "Midtown Toronto",
                "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": "M5R 2V5",
                "short_name": "M5R 2V5",
                "types": ["postal_code"]
        }],
            "formatted_address": "Spadina Museum, 285 Spadina Road, Toronto, ON M5R 2V5, Canada",
            "geometry": {
            "location": {
                "lat": 43.6789376,
                    "lng": -79.4082073
            },
                "location_type": "APPROXIMATE",
                "viewport": {
                "northeast": {
                    "lat": 43.6802865802915,
                        "lng": -79.40685831970849
    ...