JSFiddle - React, Tailwind, and code Playground

by spitfire378

HTML

<img width="500" src="https://www.flaticon.com/svg/static/icons/svg/702/702814.svg" id="on" alt="" class="light">
<img width="500" src="https://www.flaticon.com/svg/static/icons/svg/702/702797.svg" id="off" alt="" class="light">

CSS

body {
  background-color: silver;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#off {
  display: none;
}

.light {
  position: absolute;
}

JavaScript

var off = $('#off');
var on = $('#on');

$('.light').click(function() {
	if ($(this).attr('id') === 'off') {
  	on.fadeIn();
    off.fadeOut();
  } else {
  	off.fadeIn();
    on.fadeOut();
  }
});