JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="wrapper">
  <div class="test1">
      <div class="test-inner">
        
      </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  position: relative;
  height: 100vh;
  background: grey;
}
.test1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 300px;
  height: 300px;
  background: green;
}
.test-inner {
  position: fixed;
  top: 0%;
  left: 0%;
  
  width: 100px;
  height: 100px;
  background: yellow;
}