JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
  <div class="theheader"></div>
  <div class="therest">
    <p id="makeNewSystemButton"></p>
    <p id="planetsTable"></p>
  </div>
</body>

CSS

table,
tr {
  margin: 0px;
}

table,
td {
  border-collapse: collapse;
}

td {
  padding: 5px 15px;
}

tr:nth-child(even) {
  background-color: #e0e0f0;
}

body {
  padding: 0px;
  margin: 0px;
}

button {
  padding: 0px;
  margin: 0px;
}

p {
  padding: 0px;
  margin: 0px;
}

.theheader {
  background-image: url("images/qr1920x960x4.png");
  width: 100%;
  height: 50vw;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  background-attachment: fixed;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #202020;
}

.therest {
  width: 100vw;
  margin: 0px;
  padding: 0px;
  background-color: rgba(32, 32, 32, 1.0);
}

JavaScript

$(document).ready(function() {
  var htmlString = "";
  htmlString += "<p style=\"font-size:small;font-family:Consolas\">";
  htmlString += "Star:</br>";
  htmlString += "Type " + starSystem.star.spectralClass + starSystem.star.luminosityClass + "</br>";
  htmlString += "Luminosity " + starSystem.star.luminosity.toPrecision(3);
  htmlString += "</p>";

  // semimajorAxis, mass, radius, temperature, pressure, atm, clouds, hyd, frosts
  htmlString += "<table style=\"font-size:small;font-family:Consolas;border:1px solid black\">";

  // A lot of code that probably doesn't matter. Just ask if you need to see it.

  htmlString += "</table>";
  document.getElementById("planetsTable").innerHTML += htmlString;

});