JSFiddle - React, Tailwind, and code Playground

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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/fontawesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/40c5e7c8cad4c6920fed940fc31cbb63abd94c29/timeline.css">
<div class="demo">
  <div id="app"></div>
</div>

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>
                 ...