JSFiddle - React, Tailwind, and code Playground

by Koubenec

HTML

<!DOCTYPE html>
<html>
<head>
<title>Elex267-Webpage</title>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>

<body>
<!-- Banner at Top of Page ***********************************-->
<div style="background-color:blue; color:white;font-size:30px;">

<img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
<div align="center"style="margin-left:50%">Elex 267 Web Demo
<br>
Microchip TCP/IP Stack v3.02</div>
</div>
<!--*********************************************************-->
<!--NavBar Code *********************************************-->
<ul id="nav">
<li><a href="index.htm">Home</a></li>
<li><a href="features.htm">Features</a></li>
<li><a href="about.htm">About</a></li>
</ul>
<!--***************************************************-->
<h1>
Welcome to the features page of the website.<br>
</h1>
<p>
This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
<br>
Features are:
</p>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
 <td>A</td>
 <td>B</td>
</tr>
<tr>
 <td>C</td>
 <td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul id="cellul">
 <li>&bull;apples</li>
 <li>&bull;bananas</li>
 <li>&bull;pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

</body>
</html>

CSS

p {color:black;font-size:20px;background-color:white;}
 body {background-color:white;}
#nav{list-style-type:none;margin:0;padding:0;overflow:hidden;}
#nav li{float:left;}
 a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
#cellul{list-style-type:disc; margin:10px; padding:0; overflow:hidden; display: block;}
#cellul li {width: auto; float: none; list-style-type:disc;}