JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.pizzeriainnsbruck.at/wp-content/uploads/2014/08/responsiveCarousel.min.js"></script>
<div id="w">    
    <nav class="slidernav">
      <div id="navbtns" class="clearfix">
        <a href="#" class="previous">prev</a>
        <a href="#" class="next">next</a>
      </div>
    </nav>
    
    <div class="crsl-items" data-navigation="navbtns">
      <div class="crsl-wrap">
        <div class="crsl-item">
          <div class="thumbnail">
            <img src="img/thumb01.jpg" alt="nyc subway">
            <span class="postdate">Feb 16, 2014</span>
          </div>
          
          <h3><a href="#">Lorem Ipsum Dolor Sit</a></h3>
          
          <p>Suspendisse laoreet eu tortor vel dapibus. Etiam auctor nisl mattis, ornare nibh eu, lobortis leo. Sed congue mi eget velit dictum, id dictum massa tempus. Cras lobortis lectus neque. Fusce aliquet mauris ac bibendum pharetra.</p>
          
          <p class="readmore"><a href="#">Read More &raquo;</a></p>
        </div><!-- post #1 -->
        
        <div class="crsl-item">
          <div class="thumbnail">
            <img src="img/thumb02.jpg" alt="danny antonucci">
            <span class="postdate">Feb 19, 2014</span>
          </div>
          
          <h3><a href="#">A Look Back over A.K.A Cartoon</a></h3>
          
          <p>Vestibulum in venenatis velit. Praesent commodo eget purus sed interdum. Curabitur faucibus purus ut erat fermentum posuere. Suspendisse blandit viverra sagittis. Nullam cursus scelerisque lorem ut ornare.</p>
          
          <p class="readmore"><a href="#">Read More &raquo;</a></p>
        </div><!-- post #2 -->
        
        <div class="crsl-item">
          <div class="thumbnail">
            <img src="img/thumb03.jpg" alt="watercolor paints">
            <span class="postdate">Feb 23, 2014</span>
          </div>
          
          <h3><a...

CSS

/** page structure **/
#w {
  display: block;
  max-width: 830px;
  min-width: 300px;
  margin: 0 auto;
  padding: 2px 3px;
}


/** posts slider widget **/
.crsl-items {
  display: block;
  padding: 5px;
}

.crsl-item {
  background: #fff;
  padding: 8px;
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
}

.crsl-item .thumbnail {
  display: block;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}
.crsl-item .thumbnail img { 
  display: block; /* fix 1px image space http://stackoverflow.com/q/5804256/477958 */
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.crsl-item .thumbnail:hover img {
  opacity: 0.8;
}

.crsl-item h3 {
  font-family: 'Oswald', 'Trebuchet MS', Helvetica, sans-serif;
  font-size: 1.95em;
  line-height: 1.25em;
  margin-bottom: 12px;
}
.crsl-item h3 a {
  text-decoration: none;
  color: #333;
}
.crsl-item h3 a:hover {
  text-decoration: underline;
}

.crsl-item .postdate {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 6px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  font-size: 1.2em;
  font-weight: bold;
  background: #4e90da;
}

.crsl-item p {
  font-size: 1.2em;
  line-height: 1.55em;
  margin-bottom: 5px;
}

.crsl-item p.readmore a {
  display: block;
  float: right;
  color: #4e90da;
  padding: 3px 5px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 3px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.crsl-item p.readmore a:hover {
  background: #4b6caa;
  color: #fff;
}


/** posts slider nav **/
.slidernav {
  display: block;
  text-align: center;
  margin-bottom: 5px;
}

.slidernav a {
  display: inline-block;
  padding: 5px 8px;
  margin-right: 8px;
  font-size: 1.4em;
  background: #fff;
  color: #666;
  text-decoration: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius:...

JavaScript

$(function(){
  $('.crsl-items').carousel({
    visible: 3,
    itemMinWidth: 180,
    itemEqualHeight: 370,
    itemMargin: 9,
  });
  
  $("a[href=#]").on('click', function(e) {
    e.preventDefault();
  });
});