JSFiddle - React, Tailwind, and code Playground

by davidmold

HTML

<script>
function showPopPolaroid() {
	var el = document.getElementById('mel');
  el.className = 'pop-polaroid showing';
}
</script>

<div class="pop-polaroid" id="mel">
  Hello there, I am a pop polaroid
</div>
<div class="popme" onclick="showPopPolaroid()">
Show it
</div>

CSS

.popme {
  cursor: pointer;
  padding: 10px;
  border: 1px solid red;
  display: inline-block;
}

.pop-polaroid {
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #fff;
    display: block;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: all ease 0.2s;
    z-index: 600;
    padding: 30px;
    border-radius: 3px;
    box-sizing: border-box;
    border:1px solid #000;
    width:100px;
    height:100px;
}

    .pop-polaroid.showing {
        transform: translate(-50%, -50%) scale(1);
        
        opacity: 1;
    }