JSFiddle - React, Tailwind, and code Playground

by yonatan

HTML

<body>
    <a href="javascript:void(0);"><img src="http://placekitten.com/g/256/256" /></a>
    <a href="javascript:void(0);"><img src="http://placekitten.com/256/256" /></a>
    <a href="javascript:void(0);"><img src="http://placekitten.com/g/256/256" /></a>
    <a href="javascript:void(0);"><img src="http://placekitten.com/256/256" /></a>
    <a href="javascript:void(0);"><img src="http://placekitten.com/g/256/256" /></a>
    <a href="javascript:void(0);"><img src="http://placekitten.com/256/256" /></a>
</body>

CSS

body {
    margin: 20px;
}

img {
    width: 220px;
    height: 220px;
}

a {
    display: inline-block;
    line-height: 0;
    padding: 8px;
    margin: 8px;
    /* transition: 0.1s; */
    box-shadow: 0 0 1px #ccc;
    /* border: 1px solid #eee; */
    -webkit-transform: scale(1, 1);
}

a:hover {
    /* transition: 0.2s; */
    box-shadow: 0 0 16px #ccc;
    -webkit-transform: scale(1.01, 1.01);
}

a:active {
    box-shadow: 0 0 8px #ccc;
    -webkit-transform: scale(1.005, 1.005);
}