JSFiddle - React, Tailwind, and code Playground

Possible?

by Jennifer Perrin

HTML

<div class="topbar">
  <div class="menu-icon"></div>
  <nav class="r">    
    <div class="bttn">Help/Support</div>
    <div class="bttn">Settings</div>
    <div class="bttn me">Robin Brons</div>
  </nav>
</div>
<aside>
  <nav>
    <ul>
      <li>Members</li>
      <li>Schedule</li>
      <li>Blog</li>
      <li>Info</li>
    </ul>
  </nav>
</aside>
<div class="main">
  <div class="info">
    <h1>Activity Feed</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed qui dolorem repudiandae quibusdam perspiciatis hic possimus repellendus. Expedita quidem impedit voluptates laboriosam sequi perferendis voluptatem quo repudiandae delectus molestiae quia aut voluptatibus adipisci totam voluptate beatae quae maxime error veritatis cumque porro libero doloremque laborum nisi modi sint esse quasi reiciendis ab aliquam vero corporis eum soluta. Delectus facilis tempore ex debitis quibusdam quod inventore quasi sequi odio nam!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed qui dolorem repudiandae quibusdam perspiciatis hic possimus repellendus. Expedita quidem impedit voluptates laboriosam sequi perferendis voluptatem quo repudiandae delectus molestiae quia aut voluptatibus adipisci totam voluptate beatae quae maxime error veritatis cumque porro libero doloremque laborum nisi modi sint esse quasi reiciendis ab aliquam vero corporis eum soluta. Delectus facilis tempore ex debitis quibusdam quod inventore quasi sequi odio nam!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed qui dolorem repudiandae quibusdam perspiciatis hic possimus repellendus. Expedita quidem impedit voluptates laboriosam sequi perferendis voluptatem quo repudiandae delectus molestiae quia aut voluptatibus adipisci totam voluptate beatae quae maxime error veritatis cumque porro libero doloremque laborum nisi modi sint esse quasi reiciendis ab aliquam vero corporis eum soluta. Delectus facilis tempore ex debitis quibusdam quod...

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:400,600,300);

body {
  width: 100%;
  background: rgb(250, 250, 248);
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}
.topbar {
  width: 100%;
  height: 48px;
  background: rgb(55, 55, 55);
}
.topbar > nav.r {
  float: right;  
}
.bttn {
  display: inline-block;
  height: 100%;  
  cursor: pointer;
  
  /* Text */
  color: #CCC;
  font-weight: 600;
  padding: 14px 15px;
}
.bttn.me {
  background: rgb(39, 39, 39);
  margin: 0 30px 0 0; 
}
aside {
  width: 15%;
  height: 100%;
  background: rgba(255, 255, 253, 1);
  border-right: 1px solid rgba(204, 203, 199, 1);
  box-shadow: 0px 0px 4px 0px rgba(134, 134, 126, .3);
  float: left;
}
aside ul {
  margin: 0;
  padding: 0;
}
aside li {
  padding: 15px 15px;
  border-bottom: 1px solid rgba(214, 213, 209, .5);
  position: relative;
  cursor: pointer;
  z-index: 1;
  
  /* Text */
  color: #333;
  text-transform: 400;
}
.main {
  width: 85%;
  margin: 0 0 0 15%;
}
.main > .info {
  background: rgb(253, 253, 251);
  border-bottom: 1px solid rgba(201, 201, 201, .9);
  
  /* Text */
  padding: 15px 25px;
}
.main > .info p {
  font-size: 13px;
  color: #343434;
}
.main > .info h1 {
  margin: 3px 0 10px 0;
  
  /* Text */
  color: #232323;
  font-size: 18px;
  font-weight: 600;  
}
.main > .tabs {
  height: 49px;
  background: rgba(253, 253, 251, 1);
  border-bottom: 1px solid rgba(201, 201, 201, .9);
}
.main > .tabs input[name=tabs]{
  position: relative;
  z-index: -9999;
  left: -9999px;
  top: -9999px;
}
input#all:checked ~ label[for=all] {
  border-bottom: 2px solid rgb(221, 97, 97);
}
input#all:checked ~ label[for=my] {
  color: rgb(201, 201, 201);
}
input#my:checked ~ label[for=my] {
  border-bottom: 2px solid rgb(221, 97, 97);
}
input#my:checked ~ label[for=all] {
  color: rgb(201, 201, 201);
}
.main > .tabs label {
  display: inline-block;
  padding: 14px 20px;
  border-right: 1px solid rgba(201, 201, 201, .9);
  cursor:...