JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE>
<heading>
  <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
</heading>
<u>Our Awesome Website</u>

<body>
  <div class="DivClass1">
    <h1 class="topheader"> <u>Header 1</u></h1>
    <p class="topparagrph">Paragraph 1</p>
    <h1 class="midheader"> <span classc="SpanClass">Header 2  </span> </h1>
    <p class="midparagrph">Paragraph 2</p>
    <h1 class="bottomheader"><u>Header 3</u></h1>
    <p class="bottomparagrph">Paragraph 3</p>
  </div>

  <ul>Un-Ordered List
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ul>
  <ol>Ordered List
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ol>

  <table>
    <tr class="th1">
      <th> Table</th>
      <th> Table</th>
      <th> Table</th>
    </tr>
    <tr class="tr1">
      <td class="td1"> Table Data</td>
      <td class="td2"> Table Data</td>
      <td class="td3"> Table Data</td>
    </tr>
    <tr class='tr2'>
      <td class="td4"> Table Data</td>
      <td class="td5"> Table Data</td>
      <td class="td6"> Table Data</td>

  </table>


  <Button onclick="myFunction()">
  Google
  </Button>
  <script>
  var nothing = prompt("Go to the google button at the bottom");

function myFunction() {
  prompt("O_o");
  if (nothing.length >= 0) {
    alert("Trolled(:")
  }
}

</script>

</body>

CSS

body {
  color: rgb(255, 255, 255);
  background-color: black;
  font-family: georgian, cursive;
  font-size: 30px;
  font-weight: border;
}

.topheader {
  color: rgb(0, 0, 0);
  font-size: 40px;
  font-family: fantasy, cursive;
  padding:30ps;
  background-color: purple;
  border: solid white;
  border-style: double;
  margin: 50px;
  border-left-width: 20px;
  border-right-width: 20px;
  border-top-width: 10px;
  border-bottom-width: 10px;
  margin: 50px 50px 50px 50px;
}

.midheader {
  color: rgb(0, 0, 0);
  font-size: 40px;
  font-family: fantasy, cursive;
  padding: 30ps;
  background-color: purple;
  border: solid white;
  border-style: double;
  margin: 50px;
  border-left-width: 20px;
  border-right-width: 20px;
  border-top-width: 10px;
  border-bottom-width: 10px;
  margin: 50px 50px 50px 50px;
}

.bottomheader {
  color: rgb(0, 0, 0);
  font-size: 40px;
  font-family: fantasy, cursive;
  padding: 30ps;
  background-color: purple;
  border: solid white;
  border-style: double;
  margin: 50px;
  border-left-width: 20px;
  border-right-width: 20px;
  border-top-width: 10px;
  border-bottom-width: 10px;
  margin: 50px 50px 50px 50px;
}

h1 {
  color: rgb(0, 0, 0) font-size:40px;
  font-family: fantasy, cursive;
  padding: 30ps;
  background-color: purple;
  border: solid white;
  border-style: double;
  margin: 50px;
  border-left-width: 20px;
  border-right-width: 20px;
  border-top-width: 10px;
  border-bottom-width: 10px;
  margin: 50px 50px 50px 50px;
}

.topparagraph {
  color: rgb(255, 0, 0);
  font-size: 30px;
  font-family: fantasy;
  border: 5px;
  border-color: rgb(255, 215, 0);
  border-style: dashed;
  margin: 50px;
  background-color: rgb(255, 140, 0);
}

.midparagraph {
  color: rgb(255, 0, 0);
  font-size: 30px;
  font-family: fantasy;
  border: 5px;
  border-color: rgb(255, 215, 0);
  border-style: dashed;
  margin: 50px;
  background-color: rgb(255, 140, 0);
}

.bottomparagraph {
  color: rgb(255, 0, 0);
  font-size: 30px;
  font-family:...