JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<ul id="coolMenu">
        <li>
            <a href="#"> 
                <img src = "gear_icon.png" class = "nav" height = "20px" width = "20px" style="display:none">insertimage
            </a>
            <ul>
                <li>
                    <a href = "#"> Colors </a>
                    <ul>
                        <li><a href = "#"> Blue </a></li>
                        <li><a href = "#"> Green </a></li>
                        <li><a href = "#"> Red </a></li>
                    </ul>

                </li>
                <li><a href="#">Background</a></li>
                <li><a href="#">Indulgentia</a></li>
            </ul>
        </li>
    </ul>

CSS

div {
    border: thin solid #FF0000;
    height: 550px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
    width: 400px;
}
img {
    height: 500px;
    width: 350px;
}
img:nth-child(2) {
    border: 1px solid #FF0000;
    position: relative;
    right: -358px;
    top: -504px;
}
img:last-child {
    border: 1px solid #FF0000;
    left: 724px;
    position: relative;
    top: -1000px;
}