JSFiddle - React, Tailwind, and code Playground

Bootstrap Activity Feed

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <h2>Activity Feed</h2>
    
    <div class="activity-feed">
        <div class="feed-item">
            <div class="date">Sep 25</div>
            <div class="text">Responded to need <a href="single-need.php">“Volunteer opportunity”</a>
            </div>
        </div>
        <div class="feed-item">
            <div class="date">Sep 24</div>
            <div class="text">Added an interest “Volunteer Activities”</div>
        </div>
        <div class="feed-item">
            <div class="date">Sep 23</div>
            <div class="text">Joined the group <a href="single-group.php">“Boardsmanship Forum”</a>
            </div>
        </div>
        <div class="feed-item">
            <div class="date">Sep 21</div>
            <div class="text">Responded to need <a href="single-need.php">“In-Kind Opportunity”</a>
            </div>
        </div>
        <div class="feed-item">
            <div class="date">Sep 18</div>
            <div class="text">Created need <a href="single-need.php">“Volunteer Opportunity”</a>
            </div>
        </div>
        <div class="feed-item">
            <div class="date">Sep 17</div>
            <div class="text">Attending the event <a href="single-event.php">“Some New Event”</a>
            </div>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:200, 300, 400, 700);

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
    font-family:'Open Sans', sans-serif;
    color: #4e555f;
    font-size: 16px;
}
a { color: #50bced; }

.activity-feed {
    padding: 15px;
}
    .activity-feed .feed-item {
        position: relative;
        padding-bottom: 20px;
        padding-left: 30px;
        border-left: 2px solid #e4e8eb;
    }
    .activity-feed .feed-item:last-child {
        border-color: transparent;
    }
    .activity-feed .feed-item:after {
        content:"";
        display: block;
        position: absolute;
        top: 0;
        left: -6px;
        width: 10px;
        height: 10px;
        border-radius: 6px;
        background: #fff;
        border: 1px solid #f37167;
    }
    .activity-feed .feed-item .date {
        position: relative;
        top: -5px;
        color: #8c96a3;
        text-transform: uppercase;
        font-size: 13px;
    }
    .activity-feed .feed-item .text {
        position: relative;
        top: -3px;
    }

JavaScript

// Bootstrap v3.3.1
// Font Awesome 4.2.0