JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div class="container">
  
  <aside>
  <h2>Banner</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptate, architecto magni tempore repudiandae esse, modi. Provident eaque doloribus reprehenderit commodi, molestiae laboriosam, quod asperiores voluptatem, velit, odio dolorem rem!</p>
  <p>Accusamus saepe, magni eveniet hic eaque. Fugiat reprehenderit, quis. Officia recusandae fugiat accusamus iure laborum assumenda quia explicabo optio perspiciatis aut! Fuga, numquam? Tenetur alias perspiciatis inventore, fugit optio asperiores?</p>
  <p>Repellat architecto consequuntur, alias ea, beatae enim ipsam assumenda ut adipisci reiciendis sit delectus mollitia optio! Deleniti, rerum, sunt. Blanditiis neque eum architecto quia tenetur, in dignissimos repudiandae et eos.</p>
</aside>

<main>
  <h1>Zone principale</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, aliquam, molestias. Ipsam eos labore voluptate quidem sint dolore neque possimus minima, quo consequatur sit voluptatem cumque ratione, optio, necessitatibus facere nemo aliquam magni fuga consectetur. Nemo voluptatem omnis, saepe incidunt minima odio est ea voluptatibus assumenda eligendi nesciunt alias sapiente accusantium dolorum commodi adipisci at quos, modi temporibus a rem expedita. Quis dolorum alias neque libero quo inventore voluptatibus deleniti pariatur aperiam nulla modi eveniet cumque molestiae omnis repellendus enim, molestias, doloribus, est nihil laboriosam aut. Vitae alias, quae odio nisi sed nostrum itaque! Incidunt libero consequatur in cumque dicta?</p>
  <p>Impedit dolor est illum possimus, nemo iure quibusdam illo eligendi ipsa tenetur dolorem pariatur numquam officia quod tempora iusto animi quo unde placeat voluptate, ex ratione totam. Qui blanditiis, minima ab, assumenda vitae odit corporis officia eos deserunt voluptatem ipsum debitis esse deleniti ipsam! Recusandae ea eligendi, fuga itaque placeat repudiandae dolores. Amet placeat...

CSS

.container {
  display: flex;
  align-items: flex-start;
}

aside {
  background-color: pink;
}

main {
  background-color: cyan;
}

@media screen and (max-width: 500px) {
  .container {
    flex-direction: column-reverse;
  }
}