JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<div style="width:800px; height:300px; margin-top:50px; margin-left:50px;">
<div class="nowy d1"></div>
<div class="nowy d2"></div>
<div class="nowy d3"></div>
</div>

CSS

body{
    background: #eee;
    margin:0;
    padding:0;
    position: relative;
}

div.nowy{
    position: absolute;
    margin-left:10px;
    float:left;
    width:200px;
    height:100px;
    background:grey;
    border: 0px solid grey;
    -moz-transition: border 0.2s, box-shadow 0.2s, top 0.2s, left 0.2s;
    -webkit-transition: border 0.2s, box-shadow 0.2s, top 0.2s, left 0.2s;
     box-shadow: 1px 3px 3px black;
}

div.nowy:hover {
    border:5px solid white;
    box-shadow: 0px 2px 6px black;
}

.d1, .d2, .d3 { top: 20px; }
.d1 { left: 50px; }
.d2 { left: 300px; }
.d3 { left: 550px; }

.d1:hover, .d2:hover, .d3:hover { top: 15px; }
.d1:hover { left: 45px; }
.d2:hover { left: 295px; }
.d3:hover { left: 545px; }