Fork of the codrops timeline https://github.com/codrops/Blueprint-VerticalTimeline that includes a JS component to automatically put the correct date.

index.html

 <div class="timeline">
 <div class="w-container">
   <h1 id="timeline">Timeline</h1>

     <ul class="cbp_tmtimeline">
    <li>
        <time class="cbp_tmtime" datetime="2013-04-10 18:30"><span id="today"></span> <span>Now</span></time>
        <div class="cbp_tmicon cbp_tmicon-phone"></div>
        <div class="cbp_tmlabel">
            <h2>Sign Up</h2>
            <p>Give us your email we'll give you a bunch of awesome free stuff.</p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime" datetime="2013-04-11T12:04"><span id="dateOne"> </span> <span>Tomorrow</span></time>
        <div class="cbp_tmicon cbp_tmicon-screen"></div>
        <div class="cbp_tmlabel">
            <h2>Email Training</h2>
            <p>Get an email a day with info and activities to make you a world changer.</p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime" datetime="2013-04-13 05:36"><span id="dateTen"> </span> <span>In Two Weeks</span></time>
        <div class="cbp_tmicon cbp_tmicon-mail"></div>
        <div class="cbp_tmlabel">
            <h2>Submit a Proposal</h2>
            <p>Use what you learned from the course to draw up a proposal for your project.</p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime" datetime="2013-04-15 13:15"><span id="dateSoon"></span> <span>Soon After</span></time>
        <div class="cbp_tmicon cbp_tmicon-phone"></div>
        <div class="cbp_tmlabel">
            <h2>Customized Support</h2>
            <p>We'll draw from your idea, create a custom support plan, and help you actualize your idea.</p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime" datetime="2013-04-16 21:30"><span>4/15/2014</span> <span>Finish</span></time>
        <div class="cbp_tmicon cbp_tmicon-earth"></div>
        <div class="cbp_tmlabel">
            <h2>Capstone</h2>
            <p>Do it. You'll make an impact and be entered to win $250.</p>
        </div>
    </li>
   </ul>
 </div>
</div>

script.js

$( document ).ready(function() {
    var d = new Date();

var month = d.getMonth()+1;
var day = d.getDate();

var output = ((''+month).length<2 ? '0' : '') + month + '/' +
    ((''+day).length<2 ? '0' : '') + day + '/' +
    d.getFullYear();
    

var t = new Date();
t.setDate(t.getDate() + 1);
var dd = t.getDate(); 
var mm = t.getMonth() + 1;
var outputTomorrow = ((''+mm).length<2 ? '0' : '') + mm + '/' +
((''+dd).length<2 ? '0' : '') + dd + '/' +
t.getFullYear();

var tTen = new Date();
tTen.setDate(tTen.getDate() + 14);
dd = tTen.getDate(); 
mm = tTen.getMonth() + 1;
var outputTen = ((''+mm).length<2 ? '0' : '') + mm + '/' +
((''+dd).length<2 ? '0' : '') + dd + '/' + 
tTen.getFullYear();

$('#today').append(output);
$('#dateOne').append(outputTomorrow);
$('#dateTen').append(outputTen);
$('#dateSoon').append(outputTen);
});

style.css

.cbp_tmtimeline {
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
} 
 
/* The line */
.cbp_tmtimeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #afdcf8;
    left: 20%;
    margin-left: -10px;
}
 
.cbp_tmtimeline > li {
    position: relative;
}
 
/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
    display: block;
    width: 25%;
    padding-right: 100px;
    position: absolute;
}
 
.cbp_tmtimeline > li .cbp_tmtime span {
    display: block;
    text-align: right;
}
 
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
    font-size: 0.9em;
    color: #bdd0db;
}
 
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
    font-size: 2.9em;
    color: #3594cb;
}
 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
    color: #6cbfee;
}
 
/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
    margin: 0 0 15px 25%;
    background: #3594cb;
    color: #fff;
    padding: 2em;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.4;
    position: relative;
    border-radius: 5px;
}
 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
    background: #6cbfee;
}
 
.cbp_tmtimeline > li .cbp_tmlabel h2 { 
    margin-top: 0px;
    padding: 0 0 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.4);
}
 
/* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #3594cb;
    border-width: 10px;
    top: 10px;
}
 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: #6cbfee;
}
 
/* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
    width: 40px;
    height: 40px;
    font-family: 'ecoico';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 1.4em;
    line-height: 40px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    color: #fff;
    background: #46a4da;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #afdcf8;
    text-align: center;
    left: 20%;
    top: 0;
    margin: 0 0 0 -25px;
}
 

/* Example Media Queries */
@media screen and (max-width: 65.375em) {
 
    .cbp_tmtimeline > li .cbp_tmtime span:last-child {
        font-size: 1.5em;
    }
}
 
@media screen and (max-width: 47.2em) {
    .cbp_tmtimeline:before {
        display: none;
    }
 
    .cbp_tmtimeline > li .cbp_tmtime {
        width: 100%;
        position: relative;
        padding: 0 0 20px 0;
    }
 
    .cbp_tmtimeline > li .cbp_tmtime span {
        text-align: left;
    }
 
    .cbp_tmtimeline > li .cbp_tmlabel {
        margin: 0 0 30px 0;
        padding: 1em;
        font-weight: 400;
        font-size: 95%;
    }
 
    .cbp_tmtimeline > li .cbp_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #3594cb;
        top: -20px;
    }
 
    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
        border-right-color: transparent;
        border-bottom-color: #6cbfee;
    }
 
    .cbp_tmtimeline > li .cbp_tmicon {
        position: relative;
        float: right;
        left: auto;
        margin: -55px 5px 0 0px;
    }   
}

.timeline {
  background-color: #eeeeee;
  width: 100%;
}

#timeline {
    color: rgb(53, 148, 203);
    text-shadow: none;
}

.cbp_tmlabel > h2 {
  color: #fff;
}

.cbp_tmlabel > p {
  color: #fff;
}