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:fantasy;
  border:5px;
  border-color:rgb(255,215,0);
...