JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<div>
    <img src="http://dummyimage.com/100&amp;text=1" alt="1" />
    <img src="http://dummyimage.com/100&amp;text=2" alt="2" />
    <img src="http://dummyimage.com/100&amp;text=3" alt="3" />
    <img src="http://dummyimage.com/100&amp;text=4" alt="4" />
    <img src="http://dummyimage.com/100&amp;text=5" alt="5" />
    <img src="http://dummyimage.com/100&amp;text=6" alt="6" />
    <!--
    <img src="http://dummyimage.com/100&amp;text=7" alt="7" />
    <img src="http://dummyimage.com/100&amp;text=8" alt="8" />
    -->
</div>

CSS

img
{
    display: block;
    position: absolute;
}
img:nth-child(-n+4) /* les 4 premières images */
{
    right: 0;
}
img:nth-child(1),
img:nth-child(5)
{
    top: 0;
}
img:nth-child(2),
img:nth-child(6)
{
    top: 100px;
}
img:nth-child(3),
img:nth-child(7)
{
    top: 200px;
}
img:nth-child(4),
img:nth-child(8)
{
    top: 300px;
}
div
{
    position: relative;
    width: 200px;
}