JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="wrapper">
  <div class="fixed-block">
    <input type="checkbox" id="btn" class="hidden-block-ticker">
    <label class="btn" for="btn">
      <span></span>
    </label>
    <div class="hidden-block">
      <p>fgfdfdgfdg</p>
      <p>fgfdfdgfdg</p>
      <p>fgfdfdgfdg</p>
      <p>fgfdfdgfdg</p>
      <p>fgfdfdgfdg</p>
    </div>
  </div>
  <div class="content">
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
    <p>Sasasas</p>
  </div>
</div>

CSS

body {
  background-color: #333;
}

.wrapper {
  position: relative;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}

.fixed-block {
  position: fixed;
  top: 0;
  overflow: hidden;
  z-index: 999;
  max-width: 520px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hidden-block {
  display: block;
  position: absolute;
  top: 0;
  right: -200px;
  width: 200px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ccc;
  transition: right .2s;
  pointer-events: auto;
}

.hidden-block-ticker {
  display: none;
}

.btn {
  position: absolute;
  top: 15px;
  right: 0;
  width: 50px;
  hieght: 50px;
  background-color: #3da7a6;
  cursor: pointer;
  transition: right .23s;
  pointer-events: auto;
}

.btn span {
  display: block;
  width: 40px;
  height: 40px;
  margin: 5px;
  background-color: #001414;
}

.btn:hover {
  right: 10px;
}

.btn:hover + .hidden-block {
  right: -190px;
}

.hidden-block-ticker:checked ~ .btn {
  right: 200px;
}

.hidden-block-ticker:checked ~ .hidden-block {
  right: 0;
}