JSFiddle - React, Tailwind, and code Playground
by joplomacedo
HTML
<div class="phone__ratiolizer">
<div class="phone">
<div class="top">
<div class="sound_hole"></div>
<div class="flash"></div>
</div>
<div class="screen"></div>
<div class="bot">
<div class="button"></div>
</div>
</div>
</div>CSS
.phone__ratiolizer {
position: relative;
width: 300px;
}
.phone__ratiolizer:after {
content: "";
padding-bottom: 80%;
}
.phone {
}
.top {
}
.sound_hole {
}
.flash {
}
.screen {
}
.bot {
}
.button {
}