JSFiddle - React, Tailwind, and code Playground

by nightcoregirl

HTML

<div id="container">
    <logo />
    
    <div class="left-side">
      <div class="cta"></div>
    </div>
    
    <div class="right-side">
<div class="menu">
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices neque ornare aenean euismod. Gravida dictum fusce ut placerat orci nulla. Sem fringilla ut morbi tincidunt augue interdum velit. Malesuada fames ac turpis egestas sed tempus urna. Nunc consequat interdum varius sit amet. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Lorem donec massa sapien faucibus et molestie ac feugiat. Id velit ut tortor pretium. Nunc vel risus commodo viverra maecenas accumsan. Sociis natoque penatibus et magnis. Elementum tempus egestas sed sed risus pretium. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Lacus viverra vitae congue eu consequat ac.
</p>

<p>
Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Adipiscing enim eu turpis egestas pretium aenean pharetra magna. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Enim nulla aliquet porttitor lacus. Tristique senectus et netus et malesuada fames ac turpis egestas. Posuere urna nec tincidunt praesent semper feugiat nibh. Placerat vestibulum lectus mauris ultrices eros in. Donec massa sapien faucibus et molestie. Fusce id velit ut tortor. Quam vulputate dignissim suspendisse in est ante. Sed id semper risus in hendrerit gravida rutrum quisque.
</p>

<p>
Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Vulputate dignissim suspendisse in est ante. Sed sed risus pretium quam vulputate. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Dictum non consectetur a erat nam at. Aliquet enim tortor at auctor urna nunc id cursus metus. Nulla malesuada pellentesque elit eget gravida. Dui accumsan sit amet nulla facilisi morbi tempus iaculis. Vulputate dignissim suspendisse in...

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #e7e4da;
  font-family: arial;
}

#container {
/*  max-height: 100vh; */
 }

.left-side {
  background: #652C1E; 
  float: left; 
/*   display: block; */
  height: 100vh;
}

.right-side {
  width:50%;
  background: #FFDBE6;
/*   display: block; */
  float: left; 
}

.right-side{
  p{
    padding: 20px;
  }
}

.left-side, .right-side{
  width: 50%;
}

.cta {
  position: fixed;
  bottom: 0;
  background: #f1eee2;
  width: 50%;
  height: 45px;
}