JSFiddle - React, Tailwind, and code Playground

Nice Timeline

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="fullwidth">
  
  <div class="timeline group">
    
    <div class="item">
      <h2>January</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    </div>
    
    <div class="item">
      <h2>February</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
    
    <div class="item">
      <h2>March</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    </div>
    
    <div class="item">
      <h2>April</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
    </div>
    
    <div class="item">
      <h2>May</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    </div>
    
    <div class="item">
     ...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,900);
*, *:before, *:after {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Lato', sans-serif;
  line-height: 160%;
  font-size: 100%;
  color: #4d4d4d;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

.fullwidth {
  width: 100%;
  padding-top: 4rem;
  background-color: #e6e6e6;
}

.timeline {
  width: 100%;
  max-width: 60rem;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-bottom: 4rem;
  padding-left: 2rem;
  background-image: -webkit-linear-gradient(#999999, #999999);
  background-image: linear-gradient(#999999, #999999);
  background-size: 2px 100%;
  background-position: 50% 1rem;
  background-repeat: no-repeat;
}
@media (max-width: 40rem) {
  .timeline {
    background-position: 2rem 0;
  }
}

.timeline .item {
  position: relative;
  display: block;
  width: 50%;
  float: left;
  clear: both;
  margin-top: -1rem;
}
@media (max-width: 40rem) {
  .timeline .item {
    width: 100%;
    float: none;
    margin-top: 0;
    margin-bottom: 3rem;
  }
}
.timeline .item:before {
  content: '';
  position: absolute;
  top: 0.3rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid #999999;
  border-radius: 50%;
  background-color: #e6e6e6;
}
.timeline .item:hover:before {
  background-color: #999999;
}

.timeline .item:first-child {
  margin-top: 0;
}

.timeline .item:nth-child(odd) {
  float: right;
  padding-left: 2rem;
}
.timeline .item:nth-child(odd):before {
  left: -0.5rem;
}

.timeline .item:nth-child(even) {
  padding-right: 2rem;
}
@media (max-width: 40rem) {
  .timeline .item:nth-child(even) {
    padding-right: 0;
    padding-left: 2rem;
  }
}
.timeline .item:nth-child(even):before {
  right: -0.5rem;
}
@media (max-width: 40rem) {
  .timeline .item:nth-child(even):before {
    left: -0.5rem;
  }
}

.timeline .item h2 {
  display:...

JavaScript

// Font Awesome 4.2.0