JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <div class="clearfix"></div>

CSS

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    background: url("img/washi.png")  bisque;
}
.gallery{
    width: 90%;
    margin: 0 auto;
    border: 3px solid red;
    background-color: antiquewhite;
}

 .gallery a{
    display: block; 
    float:left;
    width:25%;
    height:100px;
    border:1px solid #333;
    box-sizing:border-box;
}
.clearfix{
    clear: both;
}
    a img{
    display:block;
    width:100%;
    height:100%;
    transition: all .3s ease-in-out;
    transform-origin: top left;
}

    a:focus img{
    transform: scale(1.5);
    box-shadow:0 0 15px 2px #000;
}