JSFiddle - React, Tailwind, and code Playground

by srmor

HTML

<div id="topNav">

<div id="topNav12">

<div id="topNav1">
<span class="topNavLink" id="headingTitle" >Title</span>
<a href="javascript:;" id="home" class="topNavLink">Home</a>
<a href="javascript:;" id="new" class="topNavLink">New Test</a>
</div>

<div id="topNav2">
<input type="search" size="35" id="searchInput">
<input type="button" value="Search" id="searchBttn">
</div>

</div>

<div id="topNav3">
<a id="feedback" href="javascript:;" class="topNavLink">Give Feedback</a>

<a href="javascript:;" id="settings" class="topNavLink">Settings</a><!--eventually will be the username instead-->

<!--below will be a dropdown on the Settings menu once CSS is add to hide it when not clicked-->
<!--<ul>
    <li>Account Settings</li>
    <li>Sign Out</li>
</ul>-->
</div>

</div>

<div id="divider">

</div>

<div id="tests">

    <div id="createform">

    </div>

    <div id="countingOptions">

    </div>


    <div id="studyModes">

    </div>

    <div id="testingCenter">

        <div id="test"><!--Includes the answers-->

        </div>
 
        <div id="bottomNav"> <!-- for done/grade/next button -->

        </div>

    </div>

</div>

    <ul id="UInavList">
        <li id="selectedNav">My Activity</li> <!--This has the selectedNav id until it is enabled in javascript-->
        <li>My Tests</li>
        <li>Messaging</li>
        <li>Search</li>
    </ul>


    <div id="selectedPane">
        <p> hello </p>
    </div>

CSS

#divider { /* this creates space between the top nav and the secondary nav */
           height: 120px;
           width: 100%;
         }


/*deals with the secondary UI navigation*/

#UInavList {
             list-style-type: none;
             float: left;
             display: block;
             width: 15%;
           }

#UInavList li {
                text-align: center;
                line-height: 80px;
                height: 80px;  
                font-size: 1.2em;
              }

#selectedNav {
               background: black;
               color: orange;
             }

/* ends secondary nav */




/*Deals with the top nav*/

#topNav {
          padding-top: 10px;
          padding-bottom: 10px;
          background: black;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
        }

.topNavLink {
              text-decoration: none;
              color: orange;
              padding-left: 10px;
              padding-right: 10px; 
            }

#topNav1 {
           float:left;
         }

#topNav2 {
           float: left;
           margin-left: 300px;
         }

#topNav3 {
           float: right;
         }



/*#topNav1 {
           position: absolute;
           top: 0;
           left: 0;
         }

#topNav2 {
           position: absolute;
           top: 0;
           left: 80px;
         }

#topNav3 {
           position: absolute;
           top: 0;
           left: 200;
         }*/

#headingTitle {
                font-size: 1.3em;
              }

/* ends top nav */




/* Deals with the different panes that the secondary nav handles */

#selectedPane {
         border: solid 2px black;
         float: right;
         width: 84.8%;
         height: 320px;
         
       }

/* ends panes */



body { /* sets the general body settings
      background: white;
     }