JSFiddle - React, Tailwind, and code Playground

by eget teteete

HTML

<section class="wrapper">

  <section class="section foo">

    <header class="header">
      Foo
    </header>

    <section class="page page--01">

      <aside class="aside">

        <section class="aside--inner">
          <p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0115.jpg" alt="" title="" /></p>
        </section>
      </aside>

      <main class="main">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie elit id ante feugiat hendrerit. Ut tempus dui in tristique placerat. Sed scelerisque tincidunt quam sit amet ultricies. Nulla dictum justo ut mollis tristique. Suspendisse
          at libero et nulla dignissim pharetra nec varius nisi. Sed faucibus ullamcorper tellus, non pellentesque sapien malesuada et. Curabitur mollis dolor sem, sollicitudin consectetur dui convallis vitae. Vestibulum mattis consectetur felis, a malesuada
          ligula consectetur vel. Sed sagittis sapien ut consectetur ullamcorper. Etiam sollicitudin nisi vitae ornare pharetra. Vivamus nec urna tincidunt, suscipit arcu ac, tincidunt turpis. Vestibulum sagittis felis nec quam laoreet, imperdiet laoreet
          nunc luctus. Proin et dolor lacus. Aliquam erat volutpat. Ut vel rutrum dui.</div>

        <div>Aliquam ut est sed mi tempus vulputate. Vivamus aliquet sem lorem, non suscipit ipsum varius sed. Suspendisse vehicula vehicula nunc id vulputate. Sed gravida, quam et faucibus molestie, purus enim mattis diam, consequat rutrum dolor sem dignissim
          lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue magna quam, at auctor libero condimentum a. Quisque pharetra scelerisque magna id condimentum.</div>

        <div>Duis enim neque, gravida a porttitor eget, ultrices at ex. Donec et egestas libero. Praesent luctus felis id dui egestas consequat. Nulla sed placerat turpis. Suspendisse potenti. Donec justo nulla, consectetur et commodo ac, eleifend non...

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
$black: rgb(0,0,0);
$white: lighten($black,
100%);
$dark-blue: rgb(46,
64,
72);
$blue: rgb(1,
175,
209);
$orange: rgb(250,
179,
43);
$medium-green: rgb(55,
200,
123);
$alternate-gray: rgb(250,
250,
250);
$light-gray: rgb(242,
242,
242);
$gray: rgb(212,
212,
212);
$dark-gray: rgb(136,
136,
136);
$turqouise: rgb(18,
121,
142);
$medium-blue: rgb(0,
75,
104);
$yellow: rgb(250,
217,
33);
$red: rgb(208,
61,
60);
$green: rgb(114,
152,
15);
$light-orange: rgb(255,
246,
229);
$font-size-base: 1rem;
$header-font: (2 * $font-size-base);
$footer-font: (1.5 * $font-size-base);
$space: 1rem;
* {
  &,
  &:before,
  &:after {
    background-repeat: no-repeat;
    box-sizing: border-box;
    outline: 0;
  }
}

html,
body {
  height: 100vh;
  width: 100vw
}

body {
  background-color: $white;
  color: $dark-blue;
  font-family: 'Roboto', sans-serif;
  font-size: $font-size-base;
  line-height: 1.1;
  margin: 0;
  overflow-x: hidden;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 0 $space;
  position: relative;
}

.section {
  margin-bottom: 50px;
  &:last-child {
    margin-bottom: 0;
  }
}

header,
.header,
footer,
.footer {
  align-items: center;
  background-color: $blue;
  color: $white;
  display: flex;
  flex: 0 0 100%;
  padding: 0 $space;
  position: sticky;
  text-shadow: 1px 1px 0 $black;
  z-index: 2;
}

header,
.header {
  box-shadow: 0 5px 10px 0px rgba($black, 0.5);
  font-size: $header-font;
  height: ($header-font + $space);
  margin-bottom: $space;
  top: 0;
}

footer,
.footer {
  box-shadow: 0 -5px 10px 0px rgba($black, 0.5);
  bottom: 0;
  height: ($footer-font + $space);
}

aside,
.aside {
  color: $white;
  flex: 0 0 25vw;
  display: flex;
  padding: $space;
  position: relative;
  text-shadow: 1px 1px 0 $black;
  &--inner {
    position: sticky;
    img {
      border: solid 2px $white;
      box-shadow: 0 5px 10px 0px rgba($black, 0.5);
      width:...