JSFiddle - React, Tailwind, and code Playground

by Meredith Crow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="menunav">
  <i id="faIcon" class="fa fa-navicon"></i>
</div>
<script>
  $(document).ready(function() {
    $('#faIcon').hover(function() {
      $(this).toggleClass('fa-rotate-90');
    });
  });

</script>

CSS

#menunav{
        padding: 40px;
        width: 30%;
        font-size: 50px;
				}

.fa-rotate-90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}