JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div class="cont">
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
<a href="#"><img class="pub" width="80" src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" /></a>
</div>

CSS

.cont {
  position: fixed;
  right: 10px;
}

.pub {
  opacity: 0.8;
  margin: 10px;
  display: block;
  border-radius: 100%;
  transition: all 0.1s ease-out;
}

.pub:hover {
  opacity: 1;
  animation: 0.2s pub;
  transform: scale(1.1);
}

.pub:active {
  transform: scale(1.2);
}

@keyframes pub {
  0% { transform: scale(1); }
  68% { transform: scale(1.15); }
  100% { transform: scale(1.1); }
}