JSFiddle - React, Tailwind, and code Playground

by makypl

HTML

<div id="container">
    <section id="mainContent">
         <h1>title here</h1>

        <img src="images/jayzmchg.jpg"></img>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis. Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et, cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet ligula scelerisque hendrerit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis. Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et, cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet ligula scelerisque hendrerit.</p>
    </section>
    <div id="sidebar">
        <p>Lorem ipsum sdf sdf sdf sdf sdf dsf sdf sdf ds fsdf sdolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

CSS

#container {
    /* purple border */
    height: auto !important;
    margin: 0 auto;
    max-width: 1000px;
    border: 1px solid #FF00FF;
    float: left;
}
#mainContent {
    /*red border */
    float: left;
    width: 700px;
    border: 1px solid #FF0000
}
#sidebar {
    /*blue border */
    width: 294px;
    float: right;
    border: 1px solid #0000FF;
}