JSFiddle - React, Tailwind, and code Playground

by Ray Mak

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>My Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Cormorant+Garamond:300,300i, 400,400i, 500, 500i, 600, 600i, 700, 700i" rel="stylesheet">
    <!-- <link rel="stylesheet" href="style.css"> -->
  </head>

  <body>
    <header>
      <a href="#" class="header-brand">Currency Exchange</a>
      <nav>
        <ul>
          <li><a href="#">Purchase</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <a href="#" class="header-cases">Support</a>
      </nav>
    </header>
    <main>
      <section class="index-banner">
        <div class="vertical-center">
          <h2>Currency<br> Tracking System</h2>
          <h1>Select a Currency Pair and Target Rate</h1>
        </div>
      </section>
      <!--To start banner AFTER the  image -->
      <div class="wrapper">
        <section class="index-links">
          <table>
            <tr>
              <td><input id="target.price" type="text"></td>
              <td>
                <select id="currency.pair.1">
                                        <option value="currency1">USD</option>
                                        <option value="currency1">EURO</option>
                                        <option value="currency1">YEN</option>
                                        <option value="currency1">PESO</option>
                                        <option value="currency1">USD</option>
                                        <option value="currency1">EURO</option>
                                        <option value="currency1">YEN</option>
                                        <option value="currency1">PESO</option>
                                        </select>
              </td>
              <td><input...

CSS

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

/*

    WEBSITE CODE
*/

* {
  text-decoration: none;
}

main {
  padding-top: 100px;
}

header {
  /*BANNER FIXED*/
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  /**/
  background-color: #fff;
  width: 100%;
  height: 100px;
}

header .header-brand {
  font-family: Catamaran;
  font-size: 24px;
  font-weight: 900;
  color: #111;
  text-transform: uppercase;
  display: block;
  margin: 0...

JavaScript

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "https://rates.fxcm.com/RatesXML", true);
xhttp.send();