JSFiddle - React, Tailwind, and code Playground
CSS
html {
padding:150px calc(50% - min(320px,30%));
height:400px;
position:relative;
}
body {
height: 100%;
border-radius: .5px .5px 0 0;
box-shadow: 0 0 0 35px #000, 0 0 0 38px darkgray;
background: #292a2b;
position:relative;
}
body:before {
content: '';
height: 50px;
left: -25%;
right: -25%;
-webkit-box-reflect:
below 0px
-webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(5, transparent), to(white));
-moz-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
background:
linear-gradient(0deg, black 0px, #636468 2px, #9d9ea3 16px, #dfe0e2 16px, #626367 17px 18px, transparent 18px),
linear-gradient(90deg, #636468 1px, #f7f7f7 10px 20px, transparent 40px 50%, #949698 calc(100% - 130px) calc(100% - 70px), #f7f7f7 calc(100% - 50px) calc(100% - 40px), #636468 calc(100% - 30px))
#d9dadc;
position: absolute;
top: calc(100% + 30px);
border-radius:0 0 12% 12%/0 0 45% 45%;
}
body:after {
content: 'Welcome to the magic website,\A hover me for instructions';
padding: 50px;
display:block;
text-align:center;
white-space: pre-line;
font-size: 26px;
line-height:40px;
color: var(--c,#efefef);
}
html:after {
content:"";
background: linear-gradient(0deg, transparent 7px, rgba(222, 222, 222, .3) 9px, transparent ), linear-gradient(0deg, #636468 7px, transparent );
border-radius: 0 0 20px 20px;
position: absolute;
width:140px;
height:19px;
top: calc(100% - 110px);
left: calc(50% - 80px);
}
body:hover:after {
content: '1. Open Developer Tools In FireFox, reload the page \A\ 2. Check the network tab do you see just one entry? \A\ 3. Now look at that HTML request it is empty!!! \A\ Now, hold down left click!';
font-size: 19px;
--c: white;
}
body:active:after {
content: 'Try clearing the cache, the CSS file will show up! That might give you a hint! \A\A\ Thanks for Reading and...