JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<header>
    <ul>
      <li data-name="about">About Us</li><li data-name="products">Products</li><li data-name="support">Support</li><li data-name="contact">Contact</li>
    </ul>
</header>
<img class="wheel" src="https://www.freepnglogos.com/uploads/car-wheel-png/car-wheel-png-transparent-images-download-clip-36.png" />

CSS

header{
  background-image: url(https://c4.wallpaperflare.com/wallpaper/86/62/569/fantasy-landscape-wallpaper-preview.jpg);
  min-height: 300px;
  background-size: 100%;
  background-position: 0% 50%;
  transition: all 1s;
}
header>ul{
  list-style: none;
  margin: 0px;
  padding: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(0,0,0,0.6);
}
header>ul>li{
  display: inline-block;
  width: calc(25% - 30px); /* padding-left + padding-right + margin-left + margin-right = 30 */
  background-color: orange;
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: helvetica;
  text-align: center;
}
header>ul>li[data-name="contact"]{
  background-repeat: no-repeat;
  background-image: url(https://static.vecteezy.com/system/resources/previews/003/720/498/original/phone-icon-telephone-icon-symbol-for-app-and-messenger-vector.jpg);
  background-size: auto 80%;
  background-position: 95% center;
  background-color: #fff;
  transition: all 0.5s;
}
header:hover>ul>li[data-name="contact"]{
  background-position: 5% center;
}

body.onmenu header{
   background-size: 115%;
}
body{
  transition: all 1s;
   background-color:#fff;
}
body.onmenu{
   background-color:#000;
}

body.scale header{
   transform: scale(0.5);
}

.wheel{
  height: 120px;
  position: fixed;
  left: 30px;
  top: 130px;
  transition: all 2s;
}
body.spin .wheel{
  transform: rotate(550deg);
}
body.bounce .wheel{
  transition: all 1s;
  transform: translateY(100px);
}

JavaScript

$('header>ul').mouseover(function(){

	console.log("OVER");

	$('body').addClass('onmenu');

});

$('header>ul').mouseout(function(){

	console.log("OUT");

	$('body').removeClass('onmenu');

});

$('li[data-name="contact"]').mouseover(function(){

	console.log("OVER");

	$('body').addClass('spin');

});

$('li[data-name="contact"]').mouseout(function(){

	console.log("OUT");

	$('body').removeClass('spin');

});

$('li[data-name="support"]').mouseover(function(){

	console.log("OVER");

	$('body').addClass('bounce');

});

$('li[data-name="support"]').mouseout(function(){

	console.log("OUT");

	$('body').removeClass('bounce');

});


$('.wheel').click(function(){

	$('body').toggleClass('scale');

});