JSFiddle - React, Tailwind, and code Playground

by melitele

HTML

<script src="https://cdn.furkot.com/scripts/furkot-trip-planner.min.js" defer></script>
<span>Plan with Furkot button is a submit button &lt;input type="submit"&gt; of a &lt;form&gt;. Trip planner is displayed below plan with Furkot button.</span>
<br>
<br>
<form method="POST" class="plan-trip" action="https://trips.furkot.com/trip">
    <input type="hidden" name="stop[name]" value="Mount Katahdin">
    <input type="hidden" name="stop[coordinates][lon]" value="-68.921274">
    <input type="hidden" name="stop[coordinates][lat]" value="45.904354">
    <input type="hidden" name="stop[url]" value="http://blog.furkot.com/katahdin">
    <input class="plan-button" type="submit" value="Plan trip to Mount Katahdin">
    <a class="furkot-widget-done">x</a>
</form>

<div class="furkot-widget"></div>

CSS

.plan-button {
    display: inline;
    color: white;
    background: black;
    cursor: pointer;
    padding: 8px;
    border: none;
    font-size: 16px;
}
.furkot-widget-done {
    display: inline;
    color: gray;
    cursor: pointer;
    padding: 0 2px;
    border: solid 1px gray;
    font-size: 12px;
    margin: 3px;
}
.plan-button:focus {
    outline: 0;
}
.furkot-widget-active iframe {
    width: 400px;
    height: 400px;
    border: none;
    padding: 0;
    margin: 0;
}
.furkot-widget-inactive iframe,
.furkot-widget-done.furkot-widget-inactive {
    display: none !important;
}