JSFiddle - React, Tailwind, and code Playground

by smombartz

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Map Markers from HTML Data</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt7OcciflokvTrGkk_W9PyN73doIF6YE8"></script>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div role="list" class="w-dyn-items">
        <div role="listitem" class="table w-dyn-item"><div id="w-node-eb3513b6-547a-58e4-ea39-7f72bb8d438c-3f760186" class="table-cell small"><img id="avatar" loading="lazy" width="24" src="https://assets-global.website-files.com/6468f97f40c88887a87428c1/66357e3c8fa08a515e2d8fd2_1664079312370.jpeg" alt="" class="w-node-eb3513b6-547a-58e4-ea39-7f72bb8d438d-3f760186"></div><div class="table-cell"><div id="name">Jakob</div></div><div class="table-cell"><div id="city">Sydney</div></div><div class="table-cell"><div id="latlong">40.7128, -74.0060</div></div></div><div role="listitem" class="table w-dyn-item"><div id="w-node-eb3513b6-547a-58e4-ea39-7f72bb8d438c-3f760186" class="table-cell small"><img id="avatar" loading="lazy" width="24" src="https://assets-global.website-files.com/6468f97f40c88887a87428c1/663001fff036f4af445d5d02_0*FS22pe8j4Luirri8.jpeg" alt="" class="w-node-eb3513b6-547a-58e4-ea39-7f72bb8d438d-3f760186"></div><div class="table-cell"><div id="name">Rebeca</div></div><div class="table-cell"><div id="city">Brooklyn</div></div><div class="table-cell"><div id="latlong">34.0522, -118.2437</div></div></div><div role="listitem" class="table w-dyn-item"><div id="w-node-eb3513b6-547a-58e4-ea39-7f72bb8d438c-3f760186" class="table-cell small"><img id="avatar" loading="lazy" width="24" src="https://assets-global.website-files.com/6468f97f40c88887a87428c1/661884556ecd1e77fac1207c_283144154_1236822303728017_9140050636138592106_n.jpg" alt="" sizes="24px"...