JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="columns">
  <div class="content">
    <div class="content-inner">
      <h1>Page Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas optio consectetur rerum quo dicta, aliquam ratione necessitatibus neque, aperiam aliquid magni. Enim ratione quod suscipit, asperiores officia, consectetur harum fugiat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ad ipsum, minima! Omnis officiis odio est, perferendis saepe beatae, porro necessitatibus doloremque repellat maiores! Recusandae sapiente dolorum provident amet delectus.</p>
    </div>
  </div>
  <div class="sidebar-left">
    <h2>Menu navigation</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur tempore dignissimos obcaecati illum ex at repellat id sunt debitis sapiente quas, qui quasi a unde ea ipsam possimus, odit iste.</p>
  </div>
  <div class="sidebar-right">
    <h2>Related products</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem minus laborum nostrum cupiditate iste porro aspernatur iusto, iure ad ea molestiae nihil placeat possimus, laudantium sunt, aperiam est, et nobis.</p>
  </div>
</div>

CSS

.columns {
  width: 100%;
  overflow: hidden;
}

.sidebar-left {
  width: 300px;
  float: left;
}

.sidebar-right {
  width: 300px;
  float: right;
}

.content {
  float: left;
  width: 100%;
  margin-right: -100%;
}

.content-inner {
  padding-left: 300px;
  padding-right: 300px;
}