JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<html>
<head>

</head>
<body>

<div id="ball">
<p class="name">
bios:)
</p>
</div>
<footer style="height:300px">
  
</footer>
</body>

</html>

CSS

.name{
  background:red;color:blue
;font-size:20pt;margin:50px
}
#ball{
background:url('https://image.shutterstock.com/display_pic_with_logo/1171229/603698675/stock-vector-black-and-white-tile-chessboard-pattern-vector-squares-background-603698675.jpg') center center;border:solid 3px black;border-radius:100px;height:150px;width:150px;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

/* Standard syntax */
@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}  
}