JSFiddle - React, Tailwind, and code Playground

by abdollahpor

HTML

<html>
<head>
<meta charset="utf-8">    
</head>

<body>

    <div id="myDiv1" class="mydiv">
      <p>
        انجمن کامپیوتر پیام نور کاشمر
      </p>
    </div>

</body>
</html>

CSS

.mydiv {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 220px;
  height: 100px;
  text-align:center;
  background-color: #ff9900;
}

.mydiv p {
  padding: 20px;
  line-height: 1.5em;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(1.0) rotate(0deg);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  }
  70% {
    -webkit-transform: scale(1.2) rotate(10deg);
    -webkit-box-shadow: 20px 20px 80px rgba(0,0,0,0.2);
  }
  100% {
    -webkit-transform: scale(1.2) rotate(-5deg);
    -webkit-box-shadow: 20px 20px 80px rgba(0,0,0,0.2);
  }
}


#myDiv1 {
  -webkit-animation: bounce 1s ease-in-out infinite alternate;
}