JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE>
 <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>
  
  
  <a href ="http://www.google.com">Google.com
  </a>
  
    </body>

CSS

body
{ 
color:rgb(255,255,255);
background-color:black;
font-family:georgia, 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);
 ...