JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<ul>
    <li id="li1">One</li>
    <li id="li2">One</li>
    <li>One</li>
    <li id="li3">One</li>
    <li id="li4">One</li>
</ul>

CSS

ul {
    margin: 1em;
   -moz-transform: rotateY(60deg);
-moz-transform-style: preserve-3d;        
}
li {
    background-color: silver;
    border: 1px solid black;
    display: block;
    list-style: none;
    margin-bottom: 1px;
    padding: 1em 0;
    text-align: center;
}
#li1 { -moz-transform: rotateX(40deg) translateY(-12px) translateZ(-35px); }
#li2 { -moz-transform: rotateX(20deg) translateZ(-10px); }
#li3 { -moz-transform: rotateX(-20deg) translateZ(-10px); }
#li4 { -moz-transform: rotateX(-40deg) translateY(12px) translateZ(-35px); }