JSFiddle - React, Tailwind, and code Playground

by 1010543618

HTML

<!DOCTYPE html>
<html>
<head>
    <link type="image/png" rel="icon" href="//portal.gplates.org/static/img/GPlates-icon.png">
    <meta charset="utf-8">
    <style>
        path {
            stroke: blue;
            stroke-width: 0.25px;
            fill: grey;
        }

        circle {
            fill: red;
        }

        svg {
            border: solid black 1px;
            display: block;
            margin: 0px auto;
            margin-bottom:20px;
        }

        .pathPoint{
            fill: red;
        }

        .graticule {
            fill: none;
            stroke: #777;
            stroke-width: .5px;
            stroke-opacity: .5;
        }

        .RG{
            fill: none;
            stroke-width: 1px;
            stroke: red;
        }

        .coastline{
            fill-opacity: 0.5;
        }

    </style>
</head>
<body data-view-name=points>
    <div style="width:960px; text-align: center; margin:0 auto;"><h1 id="time-label" style="font-size:3em;margin:0;">140 Ma</h1></div>
    <div style="width:962px; overflow:hidden; margin:0 auto;">
        <svg style="width:960px; height:500px;"></svg>
        <div style="text-align:center;">
            <label>Time:</label>
            <input id="recon-time" type="number" min="0" step="1" max="550" value="140" style="margin-right:10px;"/>
            <label>Projection:</label> 
            <select id="select-projection" style="margin-right:10px;">
                <option value="orthographic" >Orthographic</option>
                <option value="equirectangular" selected>Rectangular</option>
            </select>
            <label style="display:none;">Function:</label>
            <select id="select-function" style="display:none;">
                <option value="1" selected>Reconstruct Points</option>
                <option value="2" >Reconstruct Feature Collection</option>
            </select>
            <br><br>
            <textarea id="args-textarea" rows="2"...