JSFiddle - React, Tailwind, and code Playground

by chris2001

HTML

<ul class="topnav" id="myTopnav" >
  <li><a href="index.html"><img class="img-responsive" width="60px" src="http://www.psdgraphics.com/file/2015/red-plastic-button.jpg" /></a></li>
  <li><a href="doctores.html"><img class="img-responsive" width="180px" src="https://lh3.ggpht.com/cgvbtpBknBOKkGaddXEtwjoVHcZff6ZMM1sKDTv2J7GLP_feCbOZ29_dVM3Ir_CNbg=w300" /></a></li>
  <li><a href="#news"><img class="img-responsive" width="180px" src="http://www.quinkennedy.com/spacebrew-stuff/web-button/imgs/big-red-button.jpg" /></a></li>
  <li><a href="#news"><img class="img-responsive" width="180px" src="http://dl.hiapphere.com/data/icon/201502/HiAppHere_com_com.ifttt.dobutton.png" /></a></li>
  <li><a href="#news"><img class="img-responsive" width="180px" src="http://www.habbyworld.co.uk/sewing_shop/images/products/cn75-60-5.jpg" /></a></li>

  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

CSS

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    width: 100%;
    text-align: center;
}

/* Float the list items side by side */
ul.topnav li {
  /* float: left; */
    margin: 10;
    padding: 10;
    display: inline;
   /* text-align: center; */

  }

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 40px;
}