JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div id="nav">
        <!--logo_image-->
       
           <img src="b&w_logo_m.jpeg" height="79" width="155" />
        
        <!---->
        
            <div style="height:1em;"></div>
            <div style="font-size:1.1em;"><b>Artists</b></div>
            <div style="height:1em;"></div>
            <div><a href="#">Ahnnu</a></div>
            <div><a href="#">Cex</a></div>
            <div><a href="#">Co La</a></div>
            <div><a href="#">Delicate Steve</a></div>
            <div><a href="#">Dope Body</a></div>
            <div><a href="#">Dustin Wong</a></div>
            <div><a href="#">Eachothers</a></div>
            <div><a href="#">En Passant</a></div>
            <div><a href="#">Gem Vision</a></div>
            <div><a href="#">Holy Ghost Party</a></div>
            <div><a href="#">Jimmy Joe Roche</a></div>
            <div><a href="#">Jason Urick</a></div>
            <div><a href="#">Ken Seeno</a></div>
            <div><a href="#">Kid Krusher</a></div>
            <div><a href="#">Lil Jabba</a></div>
            <div><a href="#">Rick Rab</a></div>
            <div><a href="#">Teeth Mountain</a></div>
            <div><a href="#">Teenage Souls</a></div>
            <div style="height:1em;"></div>
            <div style="font-size:1.1em;"><a href="#">INFO</a></div>
    </div>

CSS

#nav{
        padding:0;
        position:fixed;
        top:11px;
        left:26px;
        font-family:helvetica;
        font-size:14px;
        background-image:url(logo_back.png);  
  /*--  background-color:red;  --*/
        width:11.1em;
        height:5.7em;
        overflow:hidden;
        transition: height .4s;
        -webkit-transition: height .4s; 
    }
   /*--  input:checked + #nav{
        height:33em;
    }
  /*-- #nav a.bg:hover{
       background-color: rgba(0,0,0,0.0);
      
    } --*/
    #nav a{
       text-decoration:none;
       color:#000;   
    }
    #nav a:hover{
       background-color:#858585;
       
    }
    #nav div{
        text-indent:0.5em;
        line-height: 1.2em;
    }

JavaScript

$(document).ready(function(){
      $('#nav').toggle(function(){
            $(this).css('height','33px')       
      },function(){
                  $(this).css('height','5px');      
      });
  
      
   
});