JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="outer">
  <div id="spinner">
    <img src="https://via.placeholder.com/150/">
  </div>
 <div id="right">
   <a href="link1.html">
     <img src="https://via.placeholder.com/40/">
   </a>
   <a href="link1.html">
     <img src="https://via.placeholder.com/40/">
   </a>
   <a href="link1.html">
     <img src="https://via.placeholder.com/40/">
   </a>
   <a href="link1.html">
     <img src="https://via.placeholder.com/40/">
   </a>
   <a href="link1.html">
     <img src="https://via.placeholder.com/40/">
   </a>
   <a href="link1.html">
     <img src="https://via.placeholder.com/40/">
   </a>
   <a href="link1.html">
     <img src="https://via.placeholder.com/40/">
   </a>
 </div>
</div>

CSS

#outer {
  display: flex;
}

#spinner:hover img {
  animation: ani 2s linear forwards infinite;
}

@keyframes ani {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

#right {
  margin-left: 50px;
  display: flex;
  flex-wrap: wrap;
}

#right>a {
  padding: 5px;
}