JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<div id="base">
    <div id="suggestions">
        <ol>
            <li style="top: 50px; left: 50px;">one</li>
            <li style="top: 300px; left: 200px;">two</li>
        </ol>    
    </div>
</div>

CSS

#base {
    position: relative;
    width: 500px;
    height: 400px;
    background: #eee;
    margin: 10px;
}

ol {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -moz-perspective: 1000px;
    -webkit-perspective: 1000px;
}

li {
    position: absolute;
    height: 50px;
    width: 50px;
    background: black;
    color: white;
    text-align: center;
    line-height: 50px;
    -moz-transform: translateZ(-100px);
    -webkit-transform: translateZ(-100px);
}