JSFiddle - React, Tailwind, and code Playground

by babich_ss

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="script.js"></script>
        <link href="style.css" rel="stylesheet">
    </head>
    
    <body>
        <article>
            <section>
                <div class="left-column">
                    <div class="scroll"></div>
                </div>
                <div class="right-column">
                    <header></header>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique tristique risus ac suscipit. Sed semper lectus ut sem tempor a 
                    varius lorem varius. In aliquet, metus non lobortis ornare, mi mauris porttitor lectus, non viverra sem massa sed neque. In convallis, 
                    neque nec tincidunt ullamcorper, tortor orci fringilla quam, eu dignissim ante mi bibendum urna. Nunc sapien odio, aliquet porta molestie tempor, 
                    blandit lacinia nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue odio luctus purus rutrum nec adipiscing diam feugiat. Aliquam erat volutpat.
                </p>
                <p>
                    Curabitur aliquet ipsum id neque aliquam a egestas metus convallis. Maecenas metus nisi, condimentum in rhoncus vitae, blandit ac dolor. Nulla 
                    sagittis venenatis placerat. Nulla iaculis ante eu ipsum elementum ultricies. Integer nulla urna, facilisis a elementum at, venenatis ut eros. 
                    Integer urna nulla, elementum non tempor sit amet, aliquam sed sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. 
                    Sed commodo egestas mi a lacinia. Fusce congue rutrum mi, ut tempor lorem venenatis quis. Donec eget dignissim urna. Maecenas non elit lectus, 
                    quis pellentesque nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
                <p>
               ...

CSS

@charset "utf-8";
/* CSS Document */
section, article, header, footer{
    display: block;
}
*{
    padding:0;
    margin:0;
    outline: thin solid grey;
}
html, body{
    width:100%;
    height:100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
section{
    width: 600px;
    position: relative;
}
.left-column{
    width: 200px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #123;
}
.right-column{
    padding: 20px 0;
    width: 400px;
    right: 0;
    float: right;
    position:relative;
    display: inline-block;
}
section::after{
    display: block;
    content: "";
    clear: both;
}
header, footer{
    height: 10px;
    position: absolute;
    width: 100%;
    left: 0;
}
header{
    top: 0;
}
footer{
    bottom: 0;
}