JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
      <ul calss="main_ul">
        <li><a href="#">Home</a>
 <ul>
<li><a href="#">Log In</a></li>
            <li><a class = "logOut" href="#">Log Out</a></li>
          </ul>
</li>
        <li class="masters"><a href="#">Masters</a></li>
        <li class="css"><a href="#">CSS</a></li>
        <li class="jscript"><a href="#">Javascript</a></li>
        <li class="jquery"><a href="#">jQuery</a></li>
      </ul>
    </div>
<br>
<br>
<select class = "filledField" style="width:300px;">
    <option>001;aynText;http://stackoverflow.com/</option>
    <option>002;anyText;http://stackoverflow.com</option>
    <option>002;anyText;http://stackoverflow.com</option>
    <option>001;anyText;http://stackoverflow.com</option>
    <option>001;anyText;http://stackoverflow.com</option>
    <option>003;anyText;http://stackoverflow.com</option>
    <option>002;anyText;http://stackoverflow.com</option>
    <option>003;anyText;http://stackoverflow.com</option>
  </select>
  
  <br>
  <br>
  <textarea class= "hiddenText textarea" rows="8" cols="50">
</textarea>

<br>
<br>
<input class= "field" type="text"/>

CSS

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center; 
  background: #ffffff;
  border-bottom: 10px solid #000066; 
  z-index: 0;
  background: -moz-linear-gradient(top,  #ffffff 0%, #d8d8d8 100%); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d8d8d8));
  background: -webkit-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
  background: -o-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
  background: -ms-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
  background: linear-gradient(to bottom,  #ffffff 0%,#d8d8d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d8d8',GradientType=0 );

}

.nav ul li{
  display: inline-block;vertical-align:top;
}
.nav ul a{
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: black;
  text-decoration: none;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  vertical-align: bottom;
  -webkit-transition: color 0.5s; 
  -moz-transition: color 0.5s;
  transition: color 0.5s;
}
.nav ul a::before{
  content: '';
  color: white;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background:#000066; 
  left: 0;
  top: 110%;
  box-shadow: -2px 2px 10px rgba(255,255,255,.5) inset;
  border-radius: 15px 15px 0 0 / 12px 12px; 
  -webkit-transition: top 0.5s; 
  -moz-transition: top 0.5s;
  transition: top 0.5s;
}

.nav ul a:hover{
  color: white; 
}
.nav ul a:hover::before{
  top: 0; 
  z-index: -1;
}

.nav li ul {
  position: absolute;
  display: none;;
  width: inherit;
  margin:0px;
  text-align:center;
}
ul li ul li a {
  text-align:center;
}
.nav li:hover ul {
  display: block;
}

.nav li ul li {
  display: block;
  margin-top:10px;
}
#q9 {
  margin-top:100px;
}

JavaScript

$(document).ready(function(){
$('.css,.jscript,.jquery').attr('disabled','disabled');

$('.logOut').click(function(){ 
window.close();
});

// to split lines based on semicolon.
function check(){
var lines = $('.hiddenText textarea').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
texts.push($.trim(lines[i]));
}
for (var i=0; i < texts.length; i++) {
var removed1 = texts[i].split(';');

$(".masters").append($("<ul><li>").text(removed1[0]));
$(".css").append($("<ul><li>").text(removed1[1]));
$(".jscript").append($("<ul><li>").text(removed1[2]));
}
}

// to split dropdown menu choices to lines.

function c1() {
var resultLines = $('.filledField').find('option').size();
var textArea ="";

for (var i = 1; i <= resultLines; i++) {

var xItem = $('.filledField').find('option:nth-child(' + (i) + ')').text(); 
textArea +=  xItem ;

//code to split xItem into individual variables
}
$('.hiddenText textarea').val('');
$('.hiddenText textarea').val(textArea);
check();
}
$(".field").blur(function(){
$('.css,.jscript,.jquery').prop("disabled", false);
c1();
});
});