JSFiddle - React, Tailwind, and code Playground

by hicurin

HTML

<nav>
  
  <div class="nav_bar_bg">
    
    <div class="px1140_container">
      <div class="nav_logo"><b>Hospitex</b>beta</div>
      <div class="nav_menu"><b>HOME </b> COURSES  JOBS</div>
      <div class="nav_login"><b>LOG IN </b> SIGN UP</div>
    </div>
    
  </div><!-- Closes nav_bar_bg-->
  
</nav>


<body>
  
  <div class="px1140_container">
    <div class="header_title">The Hospitality Industry is in <b>bad</b> shape.</div>
    <div class="header_sub_title"><b>Hospitex</b> is here to help change that. <b>One course at a time.</b></div>
    <div class="empty_100px"></div>
    
    <div class="topic_selector_bg">
      
      <ul class="t_s_ul">
        
        <li class="t_s_li">
          <div class="type_icon"></div>
          <DIV class="course_type_text">Course One</DIV>
        </li>
        <li class="t_s_li">
        </li>
        <li class="t_s_li">
        </li>
        
      </ul>      
      
    </div><!-- Closes topic_selector_bg -->
  </div><!-- Closes px1140_container -->
</body>

CSS

body {
  
  margin:0;
  background:url("http://i.imgur.com/cXafOBs.png");
  width:100%;
  height:100%;
  background-size:100% 200%;;
  
}

.nav_bar_bg {
  
  width:100%;
  height:emem;
  
  padding-top:1em;
  padding-bottom:1em;
  
}

.nav_logo {
  
  width:19%;
  display:inline-block;
  font-family:"Open Sans" , arial;
  font-size:14px;
  text-shadow:0px 1px  #2c3e50;
  color:grey;
  
  
  
  
  
}

.nav_logo b{
  
  font-size:26px;
  color:white;
  font-weight:800;
  
  
  
}

.nav_menu {
  
  width:60%;
  display:inline-block;
  font-family:"Open Sans" , arial;
  font-size:20px;

  color:white;
  
  word-spacing:30px;
  font-weight:100;
  text-align:center;
  position:relative;
  top:-2px;

}

.nav_login {
  
  width:19%;
  display:inline-block;
  font-family:"Open Sans" , arial;
  font-size:16px;
  color:white;
  
  
  font-weight:200;
  text-align:center;
  position:relative;
  top:-2px;

}

.nav_login b{
  
  color:#7f8c8d;
}

.px1140_container {
  
  width:1140px;
  margin:0 auto;
  
}


.header_title {
  
  width:960px;
  color:white;
  font-size:3em;
  margin:0 auto;
  margin-top:2.5em;
  font-family:"Open Sans" , arial;
  font-weight:200;
  text-align:center;
  
}

.header_sub_title {
  
  width:960px;
  color:white;
  font-size:1.5em;
  margin:0 auto;
  margin-top:0.5em;
  font-family:"Open Sans" , arial;
  font-weight:100;
  text-align:center;
  
  
}

b {
  
  font-weight:600;
  
}

.empty_100px {
  
  width:100%;
  height:100px;
  
  
}


.topic_selector_bg {
  
  
  width:90%;
  height:105px;
  margin:0 auto;
  
}

.t_s_ul {
  
  list-style-type:none;
  width:90%;
  padding-left:5px;
  margin-left:-10px;
  margin:0 auto;
  
}


.t_s_li {
  
  width:70px;
  height:70px;
  border:4px white solid;
  display:inline-block;
  border-radius:5px;
  margin:5px;
  position:relative;
  
  
}
.t_s_li:hover{
  
  transition:1s;
  background-color:white;
  
}

.type_icon {
  
  background:url("http://i.imgur.com/xix8EC9.png");
  width:100%;
  height:100%;
 ...

JavaScript

$(function(){
    $(".t_s_li").mouseover(function(){
      $(this).find(".course_type_text").fadeIn();               
    }).mouseout(function(){
        $(this).find(".course_type_text").hide();
    });      
});