JSFiddle - React, Tailwind, and code Playground

by Ajay Barot

CSS

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  color: #333;
  margin: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px;
}

#gmaps-canvas {
  height: 200px;

  border: 1px solid #100;
  -moz-box-shadow:    0px 0px 1px #ccc;
  -webkit-box-shadow: 0px 0px 1px #ccc;
  box-shadow:         0px 0px 1px #ccc;
}

#gmaps-error {
  color: #cc0000;
}

h1 {
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
}

p {
  padding-top: 5px;
  padding-bottom: 5px;
}

hr {
  border: none;
  padding: 5px;
  border-bottom: 1px solid #efefef;
}

#container {
  width: 81.5%;
  margin-left:  auto;
  margin-right:  auto;
  margin-top: 10px;
  padding: 35px;
  border: 1px solid #999;
  -moz-box-shadow:    0px 0px 5px #ccc;
  -webkit-box-shadow: 0px 0px 5px #ccc;
  box-shadow:         0px 0px 5px #ccc;
}

input {
  width: 300px;
}

#results {
  color: #555;
  padding-top: 10px;
}

#input {
  padding-top: 0px;
  padding-bottom: 0px;
  color: #ccc;
}
#input #gmaps-output-latitude, #input #gmaps-output-longitude {
  color: green;
}

.download { float: right; }