JSFiddle - React, Tailwind, and code Playground

by tlgreg

HTML

<div class="container">
    <div class="header">Header Stuff</div>
    <div class="content">
        <div class="column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at eros diam. Mauris et ipsum blandit libero consequat scelerisque id quis orci. Integer tellus leo, rhoncus quis imperdiet non, pretium in mauris. Phasellus lorem lectus, viverra nec suscipit sed, scelerisque ac velit. Donec vel tincidunt eros. Sed nec est justo. Donec feugiat libero quis mi facilisis egestas.</p>
    
            <p>Morbi eleifend justo eget justo interdum accumsan. Morbi augue sapien, tempus ac consectetur ut, pulvinar vel magna. Etiam posuere magna eleifend magna ornare vitae dignissim leo semper. Nunc vitae tortor nisl. Curabitur accumsan vehicula tellus ut vehicula. Maecenas et auctor nunc. Etiam molestie orci non purus semper eu luctus enim convallis. Suspendisse potenti. Sed convallis lectus sapien. Fusce euismod, lectus eget pharetra lacinia, justo mi vestibulum leo, nec dictum libero ipsum sit amet leo. Cras facilisis, tellus vel luctus interdum, elit justo bibendum dui, eu aliquam lectus felis ut nulla. Sed commodo metus eu neque aliquam consectetur. Phasellus in facilisis mauris.</p>
    
            <p>Nunc quis risus ante. Aenean metus purus, egestas vel iaculis id, mollis accumsan odio. Sed vitae tortor ut neque egestas sodales. In euismod feugiat posuere. Suspendisse bibendum placerat lacus at aliquet. Donec lobortis egestas quam, sit amet lacinia libero pellentesque id. Duis aliquet, diam sit amet ultrices facilisis, massa urna vehicula ante, non sagittis sapien orci in dolor. Phasellus volutpat metus in turpis vestibulum non cursus orci ullamcorper. Praesent dapibus, nisl id fermentum vehicula, diam lorem tincidunt quam, vel aliquet urna urna sed sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate mi sed justo cursus consequat condimentum quam sagittis. Morbi non ante...

CSS

body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #444;
}
.container {
    margin: 0 auto;
    width: 600px;
}
.header, .footer, .content {
    float: left;
    width: 100%;
}
.header, .footer {
    background: #ccc;
    height: 80px;
    font-size: 60px;
    line-height: 80px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
}
.column {
    float: left;
    width: 280px;
    padding: 10px;
}
.content { clear: both }