JSFiddle - React, Tailwind, and code Playground

Bootstrap To Do/Task type List

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'>
  <ul>
    <li class='past'>
      <label class='date'>
        <span class='weekday'>TUE</span>
        <span class='day'>23</span>
      </label>
      <a href='#'>
        <i class='fa fa-chevron-right'></i>
      </a>
      <h3>Team Christmas Party!</h3>
      <p>
        <span class='duration'>8pm to 12am</span>
        <span class='location'>Christian's House</span>
      </p>
    </li>
    <li class='next'>
      <label class='date'>
        <span class='weekday'>FRI</span>
        <span class='day'>26</span>
      </label>
      <a href='#'>
        <i class='fa fa-chevron-right'></i>
      </a>
      <h3>Ice Time</h3>
      <p>
        <span class='duration'>6:30 am to 8:15am</span>
        <span class='location'>Millwoods Rec Centre</span>
      </p>
    </li>
    <li>
      <label class='date'>
        <span class='weekday'>SAT</span>
        <span class='day'>27</span>
      </label>
      <a href='#'>
        <i class='fa fa-chevron-right'></i>
      </a>
      <h3>Game vs. RTS Tough Guys</h3>
      <p>
        <span class='duration'>6:30pm to 8:30pm</span>
        <span class='location'>Oliver Arena</span>
      </p>
    </li>
  </ul>
</div>

CSS

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

.container {
    margin: 0 auto;
    max-width: 100%;
}

a {
    font-weight: 300;
    color: inherit;
    text-decoration: none;
}

body {
    overflow-x: hidden;
    padding: 20px;
    font-family: "Open Sans", sans-serif;
    font-size: 100%;
    line-height: 1.25;
    color: #295162;
    background-color: #fffffb;
}

h2 {
    margin: 0.625em 0;
    margin-top: 1.875em;
    font-size: 0.875em;
    font-weight: 500;
    color: #9e9ea9;
}

li {
    overflow: hidden;
    margin: 0 -10px -1px -10px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ddd;
}
li .date {
    float: left;
    padding: 0.125em 0.75em 0 0;
    margin-left: 0.25em;
    margin-right: 15px;
    font-weight: 400;
    text-align: center;
    border-right: 3px solid #ddd;
    min-width: 50px;
}
li .date .weekday, li .date .day {
    display: block;
}
li .date .weekday {
    font-size: 16px;
}
li .date .day {
    margin-top: -2px;
    font-size: 14px;
}
li a {
    position: relative;
    top: 0;
    display: block;
    float: right;
    width: 40px;
    line-height: 2.5;
    text-align: center;
    font-size: 16px;
}
li h3 {
    font-weight: 400;
    margin: 0;
}
li p {
    font-weight: 300;
    margin: 0;
}
li .duration, li .location {
    font-size: 0.875em;
    color: #9e9ea9;
}
li .duration {
    margin-right: 0.25em;
    padding-left: 0.1em;
    padding-right: 0.5em;
    border-right: 1px solid #ddd;
}

li.past {
    color: #9e9ea9;
    background-color: #eee;
}

li.next .date {
    border-right-color: LightSeaGreen;
}