JSFiddle - React, Tailwind, and code Playground

by Pedro Walter

HTML

<div id="right_sidebar_parent">
  <div id="right_sidebar">
    <div id="right_sidebar_control" class="right_sidebar_side">
      <div class="right_sidebar_toggle_control text-gt"></div>
      <div id="right_sidebar_toggle">
        Your cushion
      </div>
      <div class="right_sidebar_toggle_control text-gt"></div>
    </div>
    <div id="right_sidebar_content" class="right_sidebar_side">


      <p>
        Click on any of the item below to edit them
      </p>
      <ul>
        <li>
          <a href="#">
         Back cushion, plump </a>
        </li>
        <li>
          <a href="#">
         48 x 48 x 15 </a>
        </li>
        <li>
          <a href="#">
         Sunproof Uni (in- + outdoor), AQUA BLUE </a>
        </li>
        <li>
          <a href="#">
         Micro Cluster Fibre </a>
        </li>
        <li>
          <a href="#">
         Finish Basic </a>
        </li>
      </ul>
      <p>Price: 31,39 (GBP)
      </p>
      <p><a href="index.php?rt=mand/voegToe"><u>Add to basket</u></a>
      </p>
      <p><a href="index.php?rt=Webwinkel"><u>Create new cushion</u></a>

    </div>
  </div>
</div>

<div id='parent'>

  <div class="div-horizontal-parent">
    <div class="div-left">
      <img src="http://www.kussens-op-maat.be/css/image/logokom_5_be.png">
    </div>
    <div class="div-right">
      Customer service
      <br> +32 123 123456
      <br> 9-12, 13-17 CET
    </div>
  </div>

  <div>
    <ul id="topbar">
      <li><a href="#">gallery</a></li>
      <li><a href="#">fabric</a></li>
      <li><a href="#">filling</a></li>
      <li><a href="#">finish</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">shop</a></li>
      <li><a href="#">basket</a></li>
    </ul>
  </div>
</div>

</div>
<div id="content">
  <h1><span>Create your own custom made cushions online!</span></h1>
  <p>Our company produces tailor-made cushions of the highest quality. <a href="#">Calculate your price online!</a> Fast delivery. </p>

  <img...

CSS

body {
  margin: 0px;
}

#right_sidebar_parent {
  position: fixed;
  right: 0;
  display: flex;
  justify-content: center;
  height: 100%;
}

#right_sidebar {
  background: white;
  align-self: center;
  overflow: hidden;
}

.right_sidebar_side {
  float: left;
  cursor: col-resize;
}

#right_sidebar_toggle {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: 2em;
}

.right_sidebar_toggle_control{
  font-size: 3em;
  text-align: center;  
}

.text-gt:before {
  content: ">";
}

.text-lt:before {
  content: "<";
}

#right_sidebar ul {
  padding: 0;
}

#right_sidebar li {
  list-style: none;
}

#right_sidebar li:before {
  content: '';
  background-image: url('http://www.cushioncreator.2relaxgroup.be/image/ok.png');
  display: inline-block;
  height: 12px;
  width: 12px;
  background-size: contain;
  background-repeat: no-repeat;
}

#topbar {
  list-style-type: none;
  padding: 0px;
}

#topbar li {
  display: inline-block;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

#topbar li a {
  border-bottom: 1em;
  padding: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  color: #9f1119;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
}

#topbar li a:hover {
  color: darkgray;
}

.div-horizontal-parent {
  overflow: hidden;
}

.div-left {
  float: left;
  padding: 1em;
}

.div-right {
  float: right;
  color: #9f1119;
  font-family: Arial, sans-serif;
}

#footer {
  background: #9f1119;
  color: white;
  font-family: Arial, sans-serif;
}

#footer h3 {
  margin: 0px;
}

.botbar {
  padding: 0px;
}

.botbar li {
  list-style-type: none;
}

.botbar a {
  text-decoration: none;
  color: white;
}

.botbar a:hover {
  color: darkgrey;
}

.div-33 {
  width: 28%
}

.adv-head {
  font-weight: bold;
  list-style-image: url('http://www.cushioncreator.2relaxgroup.be/image/greenArrow.jpg');
}

.adv-body {
  list-style-type: none;
}

div.vert-align {
  display: flex;
  justify-content: center;
...

JavaScript

$("#right_sidebar_control").click(function(){
	$("#right_sidebar_content").toggle('fast');
  $(".right_sidebar_toggle_control").toggleClass('text-gt text-lt');
});