JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="wrapper">
    <section class="content">
        <header>
            <h2><b>The distance between</b><b>you and Mount Everest</b></h2>      
           </header>  
        <article class="find">
            <h3>Find out<a class="geo"><span>&rarr;</span></a></h3>
            <p class="looking">with geo location</p>
            <aside></aside>
        </article>
        <article class="km"></article>
        <article class="results"></article>
        <article class="alternative">
            <h3>is...</h3>
            <p>I would love to help you out with that, but without the marvellous magic of a bit of JavaScript it's going to be hard to make an even remotely accurate guess.</p>
            <p>To give you a rough idea, it depends on where you are in the world. Here are some average distances:</p>
            <ul>
                <li>Europe: 6,500km</li>
                <li>North America: 11,600km</li>
                <li>South America: 15,600km</li>
                <li>Africa:    7,900km</li>
                <li>Oceania: 9,500km</li>
               </ul>
            <p>But if you happen to be reading this sitting in a tent in Base Camp, then the distance between you and the top of Mount Everest is the greatest of all. It's a long climb to the top and if you are going to attempt it: Good Luck!</p>
        </article>
    </section>
</div>

<section class="again"></section>

CSS

/* HOW FAR TO THE TOP OF THE WORLD - CSS */

/* RESET */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, small, strong, b, i, ul, li, fieldset, form, label, legend, article, aside, footer, header, hgroup, nav, section {    margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight: normal; font-style: normal; vertical-align: baseline; background: transparent; }                 
article, aside, footer, header, hgroup, nav, section { display: block; }
nav ul { list-style: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
/* END RESET CSS */

/* FONTS */
body, .results p, .alternative p    {    font-family: museo-sans, Tahoma, sans-serif; }
h1, h3    {    font-family: bebas-neue, 'Trebuchet MS', Tahoma, sans-serif; }
h2, p, .alternative h3, form input[type="text"]    {    font-family: museo-slab, Tahoma, sans-serif; }
footer p    {    font-family: Tahoma, Geneva, sans-serif; }

/* COLOURS */
body    {    background: #fff; color: #565656;  }
.wrapper    {    background: rgb(78,85,103) /* blue */; }
.again    {    background: rgb(184,201,98) /* green */; }

h2, form input[type="submit"]:hover    {    color: rgb(184,201,98) /* green */; }
h3, .km p, .results p, .alternative p, .alternative ul li, form label    {    color: #eee; }
.looking, .alternative h3, p.error, .results p em    {    color: rgb(227,153,77) /* orange */; }

h3 a, form input[type="submit"]    {    background: #3e3e3e; color: #fff; }
h3 a:hover    {    background: rgb(184,201,98) /* green */; }
form input[type="text"], footer    {    color: #999; }

footer    {    background: #eee; }
footer a    {    color: #777; }

/* TEXT font size */
h1 b:nth-child(1)    {    font-size: 9.0625em /* 145 */; }
h1 b:nth-child(2)    {    font-size: 4.375em /* 70 */; }
h1 b:nth-child(3)    {   ...

JavaScript

/* HOW FAR TO THE TOP OF THE WORLD - JS */

// Global variables
var user_location, user_long, user_lat;
var where_from = '<form method="get"><label for="where">Type a city, place, country...</label><input type="text" id="where" name="where" placeholder="city, town, country ... " /><input type="submit" value="GO" /><p class="error"></p></form>';

// Ask in which way the location can be calculated
$(function() {
    $('a.geo').click(function() {
        $('a.geo').removeAttr('href'); 
        $('a.geo').unbind();
        use_geolocation();
    });
});

// GEO: find lat/long and location name
function use_geolocation() {
    if (navigator.geolocation) {
        $('.looking').empty();
        $('.looking').append('finding your location...');
          navigator.geolocation.getCurrentPosition(found, problem);
    } else { problem(); } 
}

function found(position) {
    $('.looking').empty();
    $('.looking').append('Found you!');
    user_lat = position.coords.latitude;
      user_long = position.coords.longitude;
    // reverse geoloction to find the name of the place
       var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(user_lat, user_long);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
            user_location = results[0].formatted_address; 
            distance();
        }
      } else { problem(); } 
    });
}

function problem(msg) {
    $('.looking').empty();
    $('.looking').html('geolocation has let us down');
    $('a.geo').hide();
    $('.error').empty();
    $('.find aside').css('display', 'block');
    $('.find aside').append(where_from);    
    use_manual(); 
}

// MANUAL: ask location, find lat/long
function use_manual() {
    $('input:text:visible:first').focus();
    $('input#where').val('');
    $('form').submit(function(e){
        e.preventDefault();
        user_location = $('input#where').val();
       ...