JSFiddle - React, Tailwind, and code Playground

by Nimitt Shah

HTML

<div class="sky">
  <div class="sun">
    <div class="moon"></div>
  </div>
</div>

CSS

* {
  padding: 0;
  margin:0;
}
.sky {
  position: absolute;
  width: 100%;
  height: 100%;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sun {
  position: relative;
  width: 33%;
  /*padding-top: 33%;*/
  height: 33%;
  background: yellow;  
  display: flex;
  justify-content: center;
  align-items: center;
}
.moon {
  background: blue;  
  /*object-fit: fill;*/
  border-radius: 50%;
  height:min(33vh, 33vw);
  width: min(33vh, 33vw);
}

JavaScript

/*var pw = ""; var ph = ""; var cw = ""; var ch = "";

$( window ).resize(function() { 
  
pw = $('.sun').width();
ph = $('.sun').height();
cw = $('.moon').width();
ch = $('.moon').height();
  if(pw > ph){
  $('.moon').css({
      'width': ph + 'px',
      'height': ph + 'px'
  });
  }
  else {
  $('.moon').css({
      'width': pw + 'px',
      'height': pw + 'px'
  });
  }
});

function mySUNction() {
   
pw = $('.sun').width();
ph = $('.sun').height();
cw = $('.moon').width();
ch = $('.moon').height();
  if(pw > ph){
  $('.moon').css({
      'width': ph + 'px',
      'height': ph + 'px'
  });
  }
  else {
  $('.moon').css({
      'width': pw + 'px',
      'height': pw + 'px'
  });
  }
}*/