JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<section id="test">
    <article class="tr_left"></article>
    <article class="tr_midleft"></article>
    <article class="tr_midright"></article>
    <article class="tr_right"></article>
</section>
</body>
</html>

CSS

#test article {
    display: inline-block;
    height: 150px;
    width: 160px;
    background-color: blue;
    -webkit-transition: -webkit-transform 0.2s ease;
}

#test article:hover, #test article:active {
    -webkit-transform: perspective(400px) scale(1.2);
}