JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="left-menu">
  <div class="logo"><i class="fa fa-align-justify"></i>
    <div>Pure CSS Accordion Nav</div>
  </div>
  <div class="accordion">
    <div class="section">
      <input type="radio" name="accordion-1" id="section-1" checked="checked"/>
      <label for="section-1"><span>Messages</span></label>
      <div class="content">
        <ul>
          <li><i class="fa fa-inbox"></i><span>Inbox</span></li>
          <li><i class="fa fa-share"></i><span>Sent    </span></li>
          <li><i class="fa fa-archive"></i><span>Archive</span></li>
        </ul>
      </div>
    </div>
    <div class="section">
      <input type="radio" name="accordion-1" id="section-2" value="toggle"/>
      <label for="section-2"><span>Usage</span></label>
      <div class="content">
        <ul>
          <li><i class="fa fa-cog"></i><span>System</span></li>
          <li><i class="fa fa-group"></i><span>Users    </span></li>
          <li><i class="fa fa-sitemap"></i><span>Visitation</span></li>
        </ul>
      </div>
    </div>
    <div class="section">
      <input type="radio" name="accordion-1" id="section-3" value="toggle"/>
      <label for="section-3"><span>Scroller</span></label>
      <div class="content">
        <ul>
          <li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
          <li><i class="fa fa-coffee"></i><span>Need Coffee    </span></li>
          <li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
          <li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
          <li><i class="fa fa-coffee"></i><span>Need Coffee    </span></li>
          <li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
          <li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
          <li><i class="fa fa-coffee"></i><span>Need Coffee    </span></li>
          <li><i class="fa fa-coffee"></i><span>Need Coffee</span></li>
        </ul>
      </div>
    </div>
    <div class="section">
      <input type="radio"...

CSS

@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
@import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css);
.accordion {
  color: #FFF;
  width: 100%;
}
.accordion .section {
  width: 100%;
}
.accordion .section input[type='radio'] {
  display: none;
}
.accordion .section input[type='radio']:checked + label {
  background: #363636;
}
.accordion .section input[type='radio']:checked + label:before {
  content: " ";
  position: absolute;
  border-left: 3px solid #21CCFC;
  height: 100%;
  left: 0;
}
.accordion .section input[type='radio']:checked ~ .content {
  max-height: 300px;
  opacity: 1;
  z-index: 10;
  overflow-y: auto;
}
.accordion .section label {
  position: relative;
  cursor: pointer;
  padding: 10px 20px;
  display: table;
  background: #222222;
  width: 100%;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.accordion .section label:before {
  content: " ";
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  border-top: 1px solid #363636;
}
.accordion .section label:hover {
  background: #363636;
}
.accordion .section label span {
  display: table-cell;
  vertical-align: middle;
}
.accordion .section:last-of-type {
  border-bottom: 1px solid #363636;
}
.accordion .section .content {
  max-height: 0;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0;
  position: relative;
  overflow-y: hidden;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #666;
  font-family: 'Quicksand', sans-serif;
}

.left-menu {
  background: #222;
  width: 200px;
 ...