JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<div class="sticky-container">
  <ul class="sticky">
    <li>
      <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
      <p>Subscribe to our client newsletter</p>
    </li>
<!--    <li>
      <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
      <p>Twitter</p>
    </li>
    <li>
      <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
      <p>Pinterest</p>
    </li>-->


  </ul>
</div>

<!--<div class="sticky-container-first">
  <ul class="sticky-first">
    <li>
      <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
      <p>Facebook</p>
    </li>
    <li>
      <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
      <p>Twitter</p>
    </li>
    <li>
      <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
      <p>Pinterest</p>
    </li>


  </ul>
</div>-->

CSS

.sticky-container {
  /*background-color: #333;*/
  padding: 0px;
  margin: 0px;
  position: fixed;
  right: -400px;
  /*top:230px;*/
  width: 500px;

}

/* style p when hover li */
.sticky-first li:hover p {
  float: right;
}

.sticky li {
  list-style-type: none;
  background-color: #333;
  color: #efefef;
  height: 100px;
  padding: 0px;
  margin: 0px 0px 1px 0px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  cursor: pointer;


}

.sticky li:hover {
  margin-left: -400px;
  /*-webkit-transform: translateX(-100px);
		-moz-transform: translateX(-100px);
		-o-transform: translateX(-100px);
		-ms-transform: translateX(-100px);
		transform:translateX(-100px);*/
  /*background-color: #8e44ad;*/

}

.sticky li p {
  padding: 0px;
  margin: 0px;
  text-transform: uppercase;
  line-height: 100px;

}

/**** LEFT SIDE ******/


.sticky-container-first {
  /*background-color: #333;*/
  padding: 0px;
  margin: 0px;
  position: fixed;
  left: -155px;
  /*top:230px;*/
  width: 200px;

}

.sticky-first li {
  list-style-type: none;
  background-color: #333;
  color: #efefef;
  height: 43px;
  padding: 0px;
  margin: 0px 0px 1px 0px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  cursor: pointer;


}

.sticky-first li:hover {
  margin-right: -115px;
  /*-webkit-transform: translateX(115px);
		-moz-transform: translateX(115px);
		-o-transform: translateX(115px);
		-ms-transform: translateX(115px);
		transform:translateX(115px);*/
  /*background-color: #8e44ad;*/
}

.sticky-first li img {
  float: right;
  margin: 5px 5px;
  margin-left: 10px;

}

.sticky-first li p {
  padding: 0px;
  margin: 0px;
  text-transform: uppercase;
  line-height: 43px;

}