JSFiddle - React, Tailwind, and code Playground

by Valeri Dage

HTML

<div id="header">
    <p id="heading">C# Tutorials</p>
</div>
<div id="menu">
    <table id="menus">
        <tr id="firstitem"><td><a href="dasdasdas">Basics</a></td></tr>
        <tr id="seconditem"><td><a href="dasdasdas">Strings</a></td></tr>
        <tr id="thirditem"><td><a href="dasdasdas">Arrays</a></td></tr>
        <tr id="forthitem"><td><a href="dasdasdas">Binary</a></td></tr>
        <tr id="fifthitem"><td><a href="dasdasdas">Matrix</a></td></tr>
        <tr id="sixthitem"><td><a href="dasdasdas">Decimal</a></td></tr>
        <tr id="seventhitem"><td><a href="dasdasdas">Float</a></td></tr>
        <tr id="eightitem"><td><a href="dasdasdas">Lists</a></td></tr>
    </table>    
</div>
<div id="content">
    <h4> What will you learn in "C# Tutorials"?!</h4>
    <ul>
        <li> The basics of the <span class="stylish">C# Syntax</span></li>
        <li> How to create simple <span class="stylish">C# Games</span></li>
        <li> How to solve <span class="stylish">Programming Problems</span> using C# </li>
    </ul>
</div>
<div id="footer">
    <p id="footerTextLeft"> Contact me at:  <span id="email">[email protected]</span></p>
    <p id="footerTextRight"> Phone: 238-382-2838 </p>
</div>

CSS

#header {
    position:fixed;
    width:95%;
    height:60px;
    background-color:#339999;
    margin:-20px 10px 0px 5px;
    border-radius:5px;
    z-index:1;
}
#menu {
    position:relative;
    width:80px;
    height:300px;
    background-color:#9999CC;
    margin-left:5px;
    margin-top:50px;
    border-radius:5px;
    float:left;
}

#content {
    position:relative;
    width:420px;
    height:300px;
    background-color:#CCFFFF;
    float:right;
    margin-top:50px;
    margin-left:10px;
    margin-right:5px;
    margin-bottom:10px;
    border-radius:5px;   
    border:2px solid #996699;
}

#footer {
    position:relative;
    clear:both;
    background-color:#339966;
    width:98.5%;
    height:50px;
    margin-left:5px;
    border-radius:5px;
}
#heading {
    color:white;
    text-align:center;
    margin-top:20px;
    font-size:20px;
}
table {
    border:2px solid black;
    width:80px;
    border-radius:5px;
}
td {
    border:2px solid black;
    text-align:center;
  
    height:29px;
}
#firstitem {
    background-color:#99FFFF;
}
#seconditem {
    background-color:#99CCFF;
}
#thirditem {
    background-color:#9999FF;
}
#forthitem {
    background-color:#9966FF;
}
#fifthitem {
    background-color:#9933FF;
}
#sixthitem {
    background-color:#9900FF;
}
#seventhitem {
    background-color:#66FFFF;
}
#eightitem {
    background-color:#66CCFF;
}

td a {
    display:block;
    width:100%;
    height:100%;
    text-decoration:none;
}
#footerTextLeft {
    display:inline;
    float:left;
    
}
#footerTextRight {
    display:inline;
    float:right;
    margin-right:5px;
}
#email {
    font-style:italic;
}
ul {
    margin-left:10px;
}
h4 {
    margin-left:10px;
}
.stylish {
    color:#FF6600;
    text-decoration:underline;
}