JSFiddle - React, Tailwind, and code Playground

by melitele

HTML

<script src="https://cdn.furkot.com/scripts/furkot-trip-planner.min.js" defer></script>
<span><b>Furkot trip planner</b> widget is styled to fit the color scheme. Theme is set to <i>light</i> to indicate a very light background of the web page. Style of the <b>Done</b> button is used for widget buttons. Style of <a href="http://furkot.com" class='link'>this link</a> is used for links in the widget (name of the trip after one is selected to add a stop to).</span>

<br>
<br>
<a class="plan-button" href="https://trips.furkot.com/trip?stop[name]=Okemo%20Mountain&stop[address]=77%20Okemo%20Ridge%20Road%2C%20Ludlow%2C%20VT%2005149&stop[coordinates][lat]=43.4046&stop[coordinates][lon]=-72.7442&stop[notes]=Family%20Ski%20and%20Snowboard%20Resort%20in%20Ludlow%2C%20VT&stop[url]=http%3A%2F%2Fwww.okemo.com&stop[pin]=14" target="furkot">Visit Okemo Resort on your trip</a>

<a class="furkot-widget-done">Done</a>

<div class="furkot-widget" data-theme="light" data-button=".furkot-widget-done" data-link="a.link"></div>

CSS

body {
    background-color: lavenderblush;
}
.plan-button, .furkot-widget-done {
    display: inline-block;
    color: lime;
    background: darkmagenta;
    cursor: pointer;
    padding: .5em;
    border: none;
    font-size: 16px;
    text-decoration: none;
}
a.link {
    color: darkmagenta;
    background-color: lime;
    text-decoration: none;
}
.furkot-widget-active iframe {
    width: 400px;
    height: 400px;
    border: darkmagenta 1px solid;
    padding: 10px;
    margin: 0;
}
.furkot-widget-inactive iframe, .furkot-widget-done.furkot-widget-inactive, .plan-button.furkot-widget-active {
    display: none !important;
}