JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
</div><!-- end container -->
<div id="newActivity">
<form accept-charset="UTF-8" action="/activities" class="new_activity" id="new_activity" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="xLxN7/kCldSw7NBE9RjYAa6fvi1e0RPEW0myTICWhls=" /></div>
<input id="activity_profile_id" name="activity[profile_id]" type="hidden" value="1" />
<input id="activity_body" name="activity[body]" placeholder="this is for show" size="30" type="text" />
<input id="activity_submit" name="commit" type="submit" value="Add" />
</form>
</div>
CSS
.container {
transition-property:rotate;
transition-duration: .17s, .17s;
transition-timing-function: linear;
-webkit-transition-property:rotate;
-webkit-transition-duration: .17s, .17s;
-webkit-transition-timing-function: linear;
}
.container {
background-color: #000;
height:170px;
width:170px;
margin-bottom:20px;
}
.container:hover {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
}
div#newActivity {
margin:0px 30px 10px;
clear:both;
}