JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.selectric/1.9.4/selectric.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.selectric/1.9.4/jquery.selectric.min.js"></script>
<div class="left-column">

</div>
<div class="content__wrap">
  <div class="content">
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <select name="" id="">
      <option value="1">option1</option>
      <option value="2">option2</option>
      <option value="3">option3</option>
      <option value="4">option4</option>
      <option value="5">option5</option>
      <option value="6">option6</option>
    </select>

  </div>
</div>

CSS

body {
  margin: 0;
}

.left-column {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100vh;
  background: #F00;
  z-index: 100;
}

.content__wrap {
  margin-left: 200px;
}

.content {
  padding: 10px;
}

JavaScript

$(function() {
  $('select').selectric({
    disableOnMobile: false,
    preventWindowScroll: false
  });
});