JSFiddle - React, Tailwind, and code Playground

by adamco

HTML

<ul>
    <li>
        <div class="item"></div>
    </li>
    <li>
        <div class="item"></div>
    </li>
    <li>
        <div class="item"></div>
    </li>
    <li>
        <div class="item"></div>
    </li>
    <li>
        <div class="item"></div>
    </li>
    <li>
        <div class="item"></div>
    </li>
    <li>
        <div class="item"></div>
    </li>
    <li>
        <div class="item"></div>
    </li>
    <li>
        <div class="item"></div>
    </li>
</ul>

CSS

ul,li{
list-style:none;padding:0;margin:0;
}
ul{
    width:400px;
}
li, .item {
    width:100px;
    height:100px;   
}
li {
    float:left;
    margin:5px;
    position:relative;
}
.item {
    background-color: #eee;
    border:1px solid #ccc;
    position:absolute;
    z-index:1;
    -webkit-transition:all 0.1s ease-in-out;
}
.item:hover {
    width:110px;
    height:200px;
    z-index:2;
    -webkit-transform:translate(-5px,-5px);
    -webkit-box-shadow: 1px 1px 1px #888;
}