JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- INFO SIDE BAR START -->
<div id="info">
  <div class="info">
    <span id="infopen"><i class="glyphicon glyphicon-info-sign"></i></span>
    <span id="infclose"><i class="glyphicon glyphicon-remove"></i></span>
    <div style="max-height: 600px;" class="yinfo">
      <div class="col-md-12 col-sm-12 col-xs-12 margin15">
        <h4>Information Center</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, nulla eu dignissim aliquam, risus elit congue leo, vel malesuada odio ipsum sit amet nibh.</p>
        <ul class="inflist">
          <li>Quick Link One</li>
          <li>Quick Link Two</li>
          <li>Quick Link Three</li>
        </ul>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 margin25">
        <h5>Header One</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, nulla eu dignissim aliquam, risus elit congue leo, vel malesuada odio ipsum sit amet nibh. Nullam eleifend orci vitae magna sodales congue. Vivamus accumsan gravida justo, in finibus augue luctus a. Curabitur dapibus condimentum ligula, quis pharetra magna auctor quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis mauris mi, eget volutpat dui dignissim sit amet. Nunc rhoncus placerat eros, eget volutpat nulla molestie id. Pellentesque nec maximus nibh, eget aliquam tortor</p>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 margin25">
        <h5>Header Two</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, nulla eu dignissim aliquam, risus elit congue leo, vel malesuada odio ipsum sit amet nibh. Nullam eleifend orci vitae magna sodales...

CSS

#info {margin-right: -400px;right: 0;width: 400px;background: #2b4e7a;position: fixed;height: 100%;z-index: 1000;transition: all 0.5s ease-in 0s;-webkit-transition: all 0.5s ease-in 0s;-moz-transition: all 0.5s ease-in 0s;-ms-transition: all 0.5s ease-in 0s;-o-transition: all 0.5s ease-in 0s;}
#infopen {position: absolute;top: 110px;left: auto;right: 400px;background: #2b4e7a;color: #FFF;text-align: center;font-size: 28px;cursor: pointer;padding: 10px;border-radius: 5px 0 0 5px;}
#info.active {right: 400px;width: 400px;transition: all 0.5s ease-out 0s;-webkit-transition: all 0.5s ease-out 0s;-moz-transition: all 0.5s ease-out 0s;-ms-transition: all 0.5s ease-out 0s;-o-transition: all 0.5s ease-out 0s;}
#infclose {position: absolute;right: 35px;top: 20px;color: #54c2c8;cursor: pointer;}
.info {position: relative;padding: 20px;}
.info h4 {color: #FFF;}
.info p {color: #FFF;font-size: 12px;}
.inflist {list-style: none;font-size: 12px;padding: 0;}
.inflist li {color: #54c2c8;}
.info h5 {color: #FFF;}
.yinfo {overflow-x: hidden;overflow-y: auto;}
.yinfo::-webkit-scrollbar {width: 3px;}
.yinfo::-webkit-scrollbar-track {background: #284a73;}
.yinfo::-webkit-scrollbar-thumb {background: #8095af;border-radius: 5px;}
.yinfo::-webkit-scrollbar-thumb:hover {background: #FFF;}

JavaScript

$("#infclose").click(function(e) {
  e.preventDefault();
  $("#info").removeClass("active");
});
$("#infopen").click(function(e) {
  e.preventDefault();
  $("#info").addClass("active");
});