JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE>

  <body>
  times new Roman
    <h1 class = "topheader"> <u>Header 1</u></h1>
    <p class = "topparagrph">Paragraph 1</p>
    <h1 class = "midheader"> <u>Header 2</u></h1>
    <p class = "midparagrph">Paragraph 2</p>
    <h1 class = "bottomheader"><u>Header 3</u></h1>
    <p class = "bottomparagrph">Paragraph 3</p>
    
    <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>
    <th> Table</th>
    <th> Table</th>
    <th> Table</th>
  </tr>
   <tr>
    <td> Table Data</td>
    <td> Table Data</td>
    <td> Table Data</td>
  </tr>
     <tr>
    <td> Table Data</td>
    <td> Table Data</td>
    <td> Table Data</td>
  
  </table>
  
  <a href ="http://www.google.com">Google.com
  </a>
    
    </body>

CSS

body
{ 
color:rgb(10, 90, 90);
background-color:black;
font-family:georgia, cursive;
font-size: 30px;
font-weight: bolder ;

} 

.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);
 ...