JSFiddle - React, Tailwind, and code Playground

by alibenmessaoud

HTML

<!DOCTYPE HTML>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>The Holy Grail of Layouts: Example #3: A List Apart</title>
     
</head>

<body>

    <div id="header">This is the header.</div>

    <div id="container">

        <div id="center" class="column">
            <p>Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text.</p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text 
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text...

CSS

/*** The Essential Code ***/

        body {
            min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        }

        #container {
            padding-left: 200px;      /* LC fullwidth */
            padding-right: 190px;     /* RC fullwidth + CC padding */
        }
        
        #container .column {
            position: relative;
            float: left;
        }
        
        #center {
            padding: 10px 20px;       /* CC padding */
            width: 100%;
            overflow-x:hidden;
        }
        
        #left {
            width: 180px;             /* LC width */
            padding: 0 10px;          /* LC padding */
            right: 240px;             /* LC fullwidth + CC padding */
            margin-left: -100%;
        }
        
        #right {
            width: 130px;             /* RC width */
            padding: 0 10px;          /* RC padding */
            margin-right: -100%;
        }
        
        #footer {
            clear: both;
        }
        
        /*** IE Fix ***/
        * html #left {
            left: 150px;              /* RC fullwidth */
        }

        /*** Equal-height Columns ***/

        #container {
            overflow: hidden;
        }

        #container .column {
            padding-bottom: 1001em;     /* X + padding-bottom */
            margin-bottom: -1000em;     /* X */
        }

        /*** Footer Fix ***/

        * html body {
            overflow: hidden;
        }
        
        * html #footer-wrapper {
            float: left;
            position: relative;
            width: 100%;
            padding-bottom: 10010px;
            margin-bottom: -10000px;
            background: #FFF;         /*** Same as body background ***/
        }

        /*** Just for Looks ***/

        body {
            margin: 0;
            padding: 0;
            background: #FFF;
        }

        #header, #footer {
            font-size: large;
        ...