JSFiddle - React, Tailwind, and code Playground
HTML
<main>
<div class="surface">
<div class="surface-container">
<h1>This is my post :D</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam eveniet perferendis aperiam unde quis impedit quidem assumenda beatae fuga enim libero sit tempore dolorum dolorem quod quo sapiente adipisci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam eveniet perferendis aperiam unde quis impedit quidem assumenda beatae fuga enim libero sit tempore dolorum dolorem quod quo sapiente adipisci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam eveniet perferendis aperiam unde quis impedit quidem assumenda beatae fuga enim libero sit tempore dolorum dolorem quod quo sapiente adipisci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam eveniet perferendis aperiam unde quis impedit quidem assumenda beatae fuga enim libero sit tempore dolorum dolorem quod quo sapiente adipisci.</p>
<div id="disqus_thread"></div>
<script>
var disqus_shortname = 'example';
var disqus_identifier = '1';
(function() {
var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
</div>
</div>
</main>
CSS
main {
overflow: hidden;
}
.surface {
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
bottom: 0;
}
.surface-container {
position: relative;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}