JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<div id="upsko">
        <div id="utas">
            <img src="https://via.placeholder.com/350x150" />
         </div>
   
    </div>

CSS

#upsko {
        position: relative;
        top: 200px; left: 200px; width: 100px; height: 100px;
        background: rgba(255,0,0,0.5);
    }
    
    #utas {
        position: absolute;
        top: 10px; left: 10px; right: 10px; bottom: 10px;
    }
    #utas img { height: 100%; width: 100%; }
    
    #ipsko {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: rgba(0,255,0,0.5);
    }