JSFiddle - React, Tailwind, and code Playground

by Hm Ba

HTML

<body>
   
    <div class='hello'>
<img class='houssam' border="0" src="http://i.imgur.com/W4zB49A.png" height="400" width="680" />
    </div>
</body>

CSS

body {background:#F4F4F4;margin:0 auto}
.titlewrapper {
  margin: 10px 43%;
}
img.houssam { margin: 10% 26%; width: 50%; height: 40%; border: 1px solid #DFDFDF; padding: 6px;background: #fff;}
@-webkit-keyframes slide{
from{transform:translate(1000px, 0px);}
to{transform:translate(0px,0px);}} 
@keyframes slide{
from{transform:translate(1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
} 
.houssam {-moz-animation:slide 4s ;-webkit-animation:slide 4s;
animation:slide 4s }
.hello {
  margin: 0 auto;
  padding: 10px;
}
.titlewrapper a:hover {
  background: #565656;
  display: inline-block;
  border: 1px solid #393A38;
}
.titlewrapper a {
    margin:0 auto;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-family: droid arabic kufi;
  font-size: 20px;
  background: #ABE851;
  display: inline-block;
  padding: 8px;
  text-shadow: 0 -1px 0 rgba(66, 65, 65, 0.3);
  border: 1px solid #98D045;
}