JSFiddle - React, Tailwind, and code Playground

by lukgutowski

HTML

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>3 column page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
        <script src="main.js"></script>
    </head>

    <body>

        <div class="container">

            <header>
                <h1>Header</h1>
            </header>

            <section class="columns">

                <div class="column col1">
                    <h2>Left-Side Bar</h2>
                    <p>Sed ut perspiciatis unde omnis iste natus</p>
                </div>

                <div class="column col2">
                    <h2>Main Bar</h2>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                </div>

                <div class="column col3">
                    <h2>Right-Side Bar</h2>
                    <p>Sed ut perspiciatis</p>
                    <ul>
                        <li>unde</li>
                        <li>omnis</li>
                        <li>iste</li>
                    </ul>
                </div>

            </section>

            <footer>
                <h3>Footer</h3>
            </footer>

        </div>
    </body>

</html>

SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
  font-family: 'Roboto', serif;
}

.container {
  padding: 10px;
  width: 95%;
  margin: 10px;
}

header {
  margin: 2px;
  text-align: center;
  padding: 0 15px;
  border: 1px solid #85868c;
  background-color: #3999dc;
}

.columns {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 5px 2px;
}

.column {
  height: 50vh;
  flex: 1;
  border: 1px solid #85868c;
  margin: 2px;
  padding: 10px;
  background-color: #e0f2f2;
  &:first-child {
    margin-left: 0;
  }
  &:last-child {
    margin-right: 0;
  }
}

footer {
  margin: 2px;
  text-align: center;
  padding: 0 15px;
  border: 1px solid #85868c;
  background-color: #3999dc;
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .columns .column {
    flex-basis: 40%;
    margin: 2px;
    &:nth-child(1) {
      flex-basis: 90%;
      height: 20vh;
    }
    &:last-child {
      flex-basis: 20%;
    }
  }
  header {
    margin: 4px;
  }
}

@media screen and (max-width: 480px) {
  .columns .column {
    flex-basis: 100%;
    margin: 0 0 5px 0;
  }
}