JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="hamburger in"></div>
    <div class="arrow out"></div>
</div>

CSS

.container {
		    cursor: pointer;
		    position: relative;
		    width: 100px;
		    height: 100px;
		    overflow: hidden;
		    background: #005493;
		}
		.hamburger, .arrow {
		    transition: all 0.25s ease-in-out;
		    position: absolute;
		    top: 0;
		    left: 0;
		}
		.hamburger {
		    width: 100px;
		    height: 100px;
		    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAzklEQVR42u3a0Q2EIBQEQBujMa8rirIL3fvxVxNUDCYzJbCBp3k7TQAAAAAAAABAsyQlSU2yhLuW/SzL1TDmJJtzfNyaZL5yM1Zn1zWU0hJIdWbd1ZZAzIwXZopAPhyIJ2uwJ8tQH2mo76H8hDLIZ68fwwF/DAEAAAAAgC7sQxTlbAxPbob1raKc1slRIGaGopxAPFmKcijKKcqhKAcAAAAAAN9hH6IoZ2N4cjOsbxXltE6OAjEzFOUE4slSlENRTlEORTkAAAAAAAAAeN4fLyRWoj77fzwAAAAASUVORK5CYII=');
		}
		.arrow {
		    width: 100px;
		    height: 100px;
		    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABu0lEQVR42u3dsWoVQRiG4e+38AZSSZoUXoJtWq0sLbyJCAFBLFKlSxVvwDogBG1NIdjapbawiJdgIzg2KSRG3A2ZwzB53vKwcDjz7M7uHhgmkSRJkiTd6Wq2H9Rae5JkN8l2kvMk76vqK+rNQ2y11k7b3/1ore0boc2DXIfxZ8dGaYPTVFsWlA2BHLblDY1ybxKT7RXH7o2MMgvI+crj90xffaesh5dPU2uD0hFlv90sKB1RjqFAERQoggIFChQoUKAIChRBgQIFChQoUAQFiqBAgQIFChQoggJFUKAsRan/fPFukpdJHiV5gOJWeldVz1aDtNZeJznMhAtDB+hjVT1eDHJ5ZXzKPOtHhpv1kjyvqpOlIB+SPDVuXftWVTtLQb67Z3TvZ1Xdv/qhKWmw/gXyxdB072INyFGSX8as60391WKQqvqc5ABKt86ue8LyYjjgi6FuMt/4PwuGYMAQDBiCAcPowYABAwYMGDAEA4ZgwBAMGIIBAwYMGDBgwIABQzAGw7Chy0AYtjya4OqA0RHk7SwYs6wxvFhx7JuqeuE07nuF2Hp1QBSbEw8GMsX23Ta4lyRJkiRppH4DfJ8G7oQAT1UAAAAASUVORK5CYII=');
		}
		.rotate {
		    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
		}
		.back {
		    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
		}
		.in {
		    opacity: 1;
		}
		.out {
		    opacity: 0;
		}

JavaScript

$('.container').on('click', function () {
    var a = $('.hamburger'),
        b = $('.arrow');

    if (a.hasClass('in')) {
        // turn to arrow
        a.addClass('rotate out').removeClass('back in');
        b.addClass('rotate in').removeClass('back out');
    } else {
        // turn to hamburger
        a.addClass('back in').removeClass('rotate out');
        b.addClass('back out').removeClass('rotate in');
    }
});