JSFiddle - React, Tailwind, and code Playground

by auser

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://use.fontawesome.com/df036e261e.js"></script>
<div class="demo">
  <div id="app"></div>
</div>

SCSS

.demo {
  position: relative;

  .notificationsFrame {
    z-index: 2;
    width: 100%;
    top: 20px;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    font-family: 'Open Sans', Helvetica, sans-serif;
    margin-bottom: 40px;

    &.show-menu {
      transform: translate3d(150px, 0, 0);
    }

    .searchInput {
      border: 10px solid red;
      box-sizing: border-box;
      position: absolute;
      top: 13px;
      right: 55px;
      width: 200px;
      height: 34px;
      border-radius: 17px;
      border: none;
      background: #fff;
      padding: 0 17px;
      font-size: 13px;
      color: #666;
      transition: all .3s ease-in-out;
      transform: translateX(15px);
      opacity: 0;
      pointer-events: none;

      &:focus {
        outline: none;
      }

      &.active {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        pointer-events: all;
      }
    }

    .header {
      position: relative;
      height: 60px;
      background: #5f98cd;
      padding-top: 0;

      .menuIcon {
        position: absolute;
        width: 29px;
        height: 15px;
        top: 23px;
        left: 20px;
        cursor: pointer;

        &:hover {
          .dashTop,
          .dashBottom,
          .circle {
            background: #fff;
          }
        }

        .dashTop {
          position: absolute;
          width: 20px;
          height: 3px;
          top: 0;
          left: 0;
          background: #b2daff;
          border-radius: 3px;
          -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
        }

        .dashBottom {
          position: absolute;
          width: 20px;
          height: 3px;
          top: 0;
          left: 0;
          background: #b2daff;
          border-radius: 3px;
          -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
          width: 29px;
          top: auto;
      ...

Babel + JSX

const activitiesArray = [
        {
            timestamp: new Date().getTime(),
            text: "Ate Lunch",
            user: {
                id: 1,
                name: 'Nate',
                avatar: 'http://www.croop.cl/UI/twitter/images/doug.jpg'
            },
            comments: [{from: 'Ari', text: 'Me Too!'}]
        },
        {
            timestamp: new Date().getTime(),
            text: "Played Golf at Meridian",
            user: {
                id: 2,
                name: 'Nate',
                avatar: 'http://www.croop.cl/UI/twitter/images/doug.jpg'
            },
            comments: [{from: 'Nate', text: 'I wish I was there!'}]
        }
    ];
    class Content extends React.Component{
        render() {
            const {activities} = this.props;   //ES6 deconstructing
            return (
                <div className="content">
                    <div className="line"></div>
                    {/* Timeline Item */}
                    {activities.map((activity) => (
                        <ActivityItem activity={activity} />
                    ))}
                </div>
            )
        }
    }
    class ActivityItem extends React.Component{
        render() {
            const {activity} = this.props;
            return (
                    <div className="item">
                        <div className="avatar">
                            <img src={activity.user.avatar} alt=""/>
                            {activity.user.name}
                        </div>
                        <span className="time">{activity.timestamp}</span>
                        <p>**{activity.text}**</p>
                        <div className="commentCount">{activity.comments.length}</div>
                    </div>
            )
        }
    }
    class Header extends React.Component {
        render() {
            return (
                <div className="header">
                    <div className="fa fa-more"></div>
                 ...