JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image_wrapper">
    <img class="animated_gif" src="http://www.wired.com/images_blogs/design/2013/09/tumblr_inline_mjx5ioXh8l1qz4rgp.gif" />
    <img class="still_img"...

CSS

.image_wrapper{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: #ddd;
    width: 150px;
    height: 150px;
    padding:10px;
}

.animated_gif{
    width:100%;
    height:150px; 
}
.still_img{
    display:none;
}
.play_btn{
    background:#2FB82B;
    padding:5px;
    text-decoration:none;
    color:white;
    font-weight:bold;
    border-radius:4px;
    margin: 42px;
    position:relative;
    top:10px;
}

.play_btn:hover{
    background:#4DD849;
}

JavaScript

$('.play_btn').on('click', function() {
    $('img').toggle();
})