JSFiddle - React, Tailwind, and code Playground

by spinal007

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<steph>
	<face id="face">
		<arm>
			<hand id="right-palm" class="right palm"/>
		</arm>
	</face>
</steph>

<button>Face Palm</button>

CSS

steph, steph *{ display:block; }
#face{ position: relative; width:200px; height:200px; background:#900; border-radius:100px; }
.palm{ position: absolute; bottom:0; width:30px; height:30px; background:#00C; }
.right{ right:0; }
.face-palmed{ width:80px; transform: translate(-55px,-120px); transition-duration: 0.6ms; }

JavaScript

$(function(){

	$('steph')
		.on('face-palm', function(event){

			$(this).find('hand.right').addClass('face-palmed');

		})
	;

	$('button')
		.on('click.palm-to-face',function(event){
			event.preventDefault();

			$('steph').trigger('face-palm');

			setTimeout(function(){
				$('.face-palmed').removeClass('face-palmed');
			}, 1000)

		})
	;

})