JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img id="prod-img" src="http://fiddle.jshell.net/img/logo.png" />
    <p id="prod-desc">This is a description of prods</p>
</div>

CSS

#container {
    background-color: #00FFFF;
    overflow: hidden;
}

#prod-img {
    width: 33%;
    max-width: 33%;
    margin-right: 3%;
    display: inline-block;
    float: left;
}

#prod-img:hover, #prod-img:active{
    width: auto;
    float: none;
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}