JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<body>
    <div id="base">
        <div class="scrollbox">
             <h2>Title</h2>

            <p>The bright, woozy haze of Wojciech Fangor’s psychedelic paintings is mesmerising. It’s even more so having learnt that the Polish artist, who worked during the 1960s, created these Op art masterpieces entirely in isolation, working in Eastern Europe having not seen the similar works being created in America and Europe by the likes of Bridget Riley and Victor Vasarely. As such, while the images feel familiar; there’s also something exotic about them, pulsing with light created using intensely coloured oil paint applied in thin layers. A new show named Colour-Light-Space opens next month at London’s 3 Grafton Street gallery, and will display a number of works by Wojciech from the 1960s and 1970s that demonstrate his mastery of all three words in the title. It’s fascinating to think of the artist working on these beautiful optical illusions and explorations of the power of painting well before similar works were created elsewhere in the world, and it’s great to have his work celebrated in the way it deserves.</p>
            <p>The bright, woozy haze of Wojciech Fangor’s psychedelic paintings is mesmerising. It’s even more so having learnt that the Polish artist, who worked during the 1960s, created these Op art masterpieces entirely in isolation, working in Eastern Europe having not seen the similar works being created in America and Europe by the likes of Bridget Riley and Victor Vasarely. As such, while the images feel familiar; there’s also something exotic about them, pulsing with light created using intensely coloured oil paint applied in thin layers. A new show named Colour-Light-Space opens next month at London’s 3 Grafton Street gallery, and will display a number of works by Wojciech from the 1960s and 1970s that demonstrate his mastery of all three words in the title. It’s fascinating to think of the artist working on these beautiful optical illusions and...

CSS

html {
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
/* #base {
    width: 80%;
    max-width: 100em;
    height: 100%;
    margin: 0 auto;
    font: 13px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-bottom: 100px;
    letter-spacing: 1px;
    } */
#base {
    width: 100%;
    /* max-width: 50em; */
    height: 100%;
    left: 5%;
    right: 5%;
    /* margin: 0 auto; */
    }

.scrollbox {
    border: solid 1px black;
    overflow: scroll;
    position: fixed;
    top: 4%;
    bottom: 4%;
    z-index: 100;
    height: 92%;
    width: 50%;
}