JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="sun">
    <div class="eye"></div>
</div>

<div id="second-sun">
</div>

CSS

#sun {
    background-image: url( http://placehold.it/200x200&text=Sun );
    border: 10px solid red;
    height: 200px;
    margin: 50px;
    position: relative;
    width: 200px;
}

#sun .eye {
    background-image: url( http://placehold.it/20x20&text=Eye );
    border: 1px solid yellow;
    height: 20px;
    xmargin: 90px auto 0;
    position: absolute;
    top: 90px;
    left: 90px;
    width: 20px;
}

#second-sun {
    background-image:
        url( http://placehold.it/20x20&text=Eye ),
        url( http://placehold.it/200x200&text=Sun );
    background-position:
        90px 90px,
        30px 30px;
    background-repeat: no-repeat;        
    border: 10px solid yellow;
    height: 200px;
    margin: 50px;
    width: 200px;
}