JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<html>
    <head>
        <style type="text/css">
 
  
.pro ul{  
    margin:0;  
    padding:0;
    font-size:12px;
    font-weight:bold;    
}  
  
.pro ul li{  
    width:100px;  
    height:38px;  
    float:left;  
    color:#191919;  
    text-align:center;  
    overflow:hidden;  
}  
 .un:hover,  .deux:hover, .trois:hover, .quatre:hover{
 background:#2C2020;
 }
.un, .deux, .trois, .quatre{background:#423737;}  

    .protext{  
        padding-top:10px;  
    }  
  
p a, p{  
    color:#FFF;  
    text-decoration:none;  
            margin:10px 0px;
}  
  
        </style>
       
    </head>
    <body>

    <body>  
  <div class="pro">
  
  
  
    <ul id="pro">  
        <li class="un 24">  
            <p><a href="#">University</a></p>  
            <p class="protext">Time</p>  
        </li>  
        <li class="deux 24">  
            <p><a href="#">About</a></p>  
            <p class="protext">More...</p>  
        </li>  
        <li class="trois 24">  
            <p><a href="#">Contact</a></p>  
            <p class="protext">US</p>  
        </li>  
        <li class="quatre 24">  
            <p><a href="#">Submit</a></p>  
            <p class="protext">Send us your message</p>  
        </li>  
    </ul>


</div>    
</body>  
</html>  
             
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
       $(".24").mouseover(function(){  
       ...