JSFiddle - React, Tailwind, and code Playground
by Elguja Bogveradze
HTML
<style>
#main-content {
padding-bottom: 40px;
}
#details.hidden,
#main-content.hidden {
display: block;
height: 0;
opacity: 0;
overflow: hidden;
}
#main-content {
margin: 0;
transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
#main-content {
flex: 1 1 auto;
order: 0;
}
.extended-reporting-has-checkbox #main-content {
flex: 1 1 auto;
order: 0;
}
html[subframe] #main-frame-error {
display: none;
}
.interstitial-wrapper {
box-sizing: border-box;
font-size: 1em;
line-height: 1.6em;
margin: 100px auto 0;
max-width: 600px;
width: 100%;
}
.interstitial-wrapper {
padding: 0 10%;
}
.interstitial-wrapper {
max-width: 736px;
}
.interstitial-wrapper {
box-sizing: border-box;
margin: 24px auto 12px;
padding: 0 24px;
position: relative;
}
.interstitial-wrapper p {
font-size: .95em;
line-height: 1.61em;
margin-top: 8px;
}
body {
background-color: #f7f7f7;
color: #646464;
font-family: 'Segoe UI', Tahoma, sans-serif;
}
body .nav-wrapper {
background: #f7f7f7;
bottom: 0;
left: 0;
margin: 0;
max-width: 736px;
padding-left: 24px;
padding-right: 24px;
position: fixed;
z-index: 1;
}
.icon-generic {
/**
* Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
* renderer process, so embed the resource manually.
*/
content: -webkit-image-set(
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAQMAAABvIyEEAAAABlBMVEUAAABTU1OoaSf/AAAAAXRSTlMAQObYZgAAAENJREFUeF7tzbEJACEQRNGBLeAasBCza2lLEGx0CxFGG9hBMDDxRy/72O9FMnIFapGylsu1fgoBdkXfUHLrQgdfrlJN1BdYBjQQm3UAAAAASUVORK5CYII=) 1x,
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAQMAAADdiHD7AAAABlBMVEUAAABTU1OoaSf/AAAAAXRSTlMAQObYZgAAAFJJREFUeF7t0cENgDAMQ9FwYgxG6WjpaIzCCAxQxVggFuDiCvlLOeRdHR9yzjncHVoq3npu+wQUrUuJHylSTmBaespJyJQoObUeyxDQb3bEm5Au81c0pSCD8HYAAAAASUVORK5CYII=)...