JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <header>header lorem upsudth is inexplicably set to a fixed number of pixels, it’s a really well-executed mobile site. The core content is presented very nicely. The cruft is gone.  But then, if that cruft is unnecessary, why serve it up on the “desktop” version? I can see how it might seem like a waste not to use extra screen space and bandwidth if it’s available, but I’d love see an approach that’s truly based on progressive enhancement. Begin with the basic content; structure it to best fit the screen using media queries or some other form of feature detection (not browser detection); pull in extra content for large-screen user-agents, perhaps using some form of lazy loading. To put it in semantic terms, if the content could be marked up as an aside, it may be a prime candidate for lazy loading based on device capability:  The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.  I’m being unfair on The Guardian site …and most content-based sites with a similar strategy. Almost every site that has an accompanying mobile version—Twitter, Flickr, Wikipedia, BBC—began life when the desktop was very much in the ascendency. If those sites were being built today, they might well choose a more responsive, scalable solution.  It’s very, very hard to change an entire existing site. There’s a lot of inertia to battle against. Also, let’s face it: most design processes are not suited to solving problems in a device-independent, content-out way. It’s going to be challenging for large organisations to adjust to this way of thinking. It’s going to be equally challenging for agencies to sell this approach to clients—although I feel Clearleft may have a bit of an advantage in having designers like Paul who really get it. I think a lot of the innovation in this area will come from more nimble quarters: personal projects...

CSS

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

article, header, section, footer {
    display: block;  
    width: 100%;
}

article {
    position: relative;
    height: 100%;
    padding: 100px 0px;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

header, footer {
    position: absolute;
    overflow: auto;
    height: 100px; 
    background-color: green;   
}
header {
    top: 0px   
}

footer {
    bottom: 0px;  
}

section {
    height: 100%;
    background-color: red;
}