JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <br /><br />
    <div class="hand">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</body>

CSS

.card {
    width: 140px;
    height: 190px;
    border: 1px solid #aaa;
    border-radius: 7px;
    box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
    background: white;
}
.hand {
    position: relative;
}
.hand .card {
    position: absolute;
    transition: top .5s;
    top: 0;
}
.hand .card:hover, .hand .card.selected {
    top: -2em;
}

.hand .card:nth-child(1)  { left: 1.1em; }
.hand .card:nth-child(2)  { left: 2.2em; }
.hand .card:nth-child(3)  { left: 3.3em; }
.hand .card:nth-child(4)  { left: 4.4em; }
.hand .card:nth-child(5)  { left: 5.5em; }
.hand .card:nth-child(6)  { left: 6.6em; }
.hand .card:nth-child(7)  { left: 7.7em; }
.hand .card:nth-child(8)  { left: 8.8em; }
.hand .card:nth-child(9)  { left: 9.9em; }