JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="blog-wrap">
              <div class="blog-data">
                <div class="blog-item">
                  <div class="img">
                    <img src="images/blog-test.jpg" alt="">
                  </div>
                  <div class="text">
                    <h3>Lorem ipsum dolor</h3>
                    <p class="date">Posted: Thursday, January 8th, 2015 at 3:02pm</p>
                    <p>Sed in aliquet ligula, sit amet commodo dolor. Integer sodales, lacus vitae pharetra tincidunt, justo odio interdum nisl, et tristique lectus odio quis tellus. In sit amet tempus mauris. Aliquam vitae orci nisl. Phasellus ultricies consectetur magna suscipit feugiat. Nulla pellentesque vel dui non eleifend.</p>
                      <a href="#" class="button">Read More</a>
                  </div>
                </div>
                <div class="blog-item">
                  <div class="img">
                    <img src="images/blog-test.jpg" alt="">
                  </div>
                  <div class="text">
                    <h3>Lorem ipsum dolor</h3>
                    <p class="date">Posted: Thursday, January 8th, 2015 at 3:02pm</p>
                    <p>Sed in aliquet ligula, sit amet commodo dolor. Integer sodales, lacus vitae pharetra tincidunt, justo odio interdum nisl, et tristique lectus odio quis tellus. In sit amet tempus mauris. Aliquam vitae orci nisl. Phasellus ultricies consectetur magna suscipit feugiat. Nulla pellentesque vel dui non eleifend.</p>
                      <a href="#" class="button">Read More</a>
                  </div>
                </div>
                <div class="blog-item">
                  <div class="img">
                    <img src="images/blog-test.jpg" alt="">
                  </div>
                  <div class="text">
                    <h3>Lorem ipsum dolor</h3>
                    <p class="date">Posted: Thursday, January 8th, 2015 at 3:02pm</p>
                   ...

CSS

.container {
margin: 0 auto;
width: 1200px;
display: block;
}

.blog-wrap {
  display: block;
  margin: 75px 10px;
}

.blog-wrap .blog-data .blog-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 60px 0;
  padding: 0 0 60px 0;
  border-bottom: 2px solid #ddd;
}

.blog-wrap .blog-data .blog-item:nth-last-child(2) {
  margin: 0;
  border: none;
  background-color: red;
}

.blog-wrap .blog-data {
  float: left;
  width: 860px;
}

.blog-wrap.blog-wrap .blog-item .img {
  float: left;
  width: 258px;
  height: 258px;
  border: 1px solid #ddd;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.blog-wrap .blog-item .img img {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px; 
}

.blog-wrap .blog-item .text {
  float: right;
  width: 560px;
  line-height: 24px;
  font-size: 16px;
  color: #666;  
}

.blog-wrap .blog-item .text h3 {
  margin: 2px 0 0 0;
  font-family: ProximaNova-bold,sans-serif;  
  color: #432498;
  font-size: 36px;
}

.blog-wrap .blog-item .text .date {
  margin: 5px 0 15px 0;
  color: #999;
  font-size: 18px;
  font-family: ProximaNova-bold,sans-serif;  
}

.blog-wrap .blog-item .button {
  display: inline-block;
  margin: 40px 0 0 0;
  padding: 7px 65px;
  color: #00aced;
  font-size: 18px;
  border: 3px solid #00aced;
  font-family: ProximaNova-bold,sans-serif;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  transition: 0.3s;
  text-transform: uppercase;
}

.blog-wrap .blog-item .button:hover {
  opacity: 0.7;
}

.blog-wrap .scroll {
  display: block;
  margin: -30px 0 30px 0;  
  font-size: 16px;
  color: #00aced;
  text-transform: uppercase;
  font-family: ProximaNova-bold,sans-serif;  
}

.blog-wrap .scroll i {
  vertical-align: top;
  margin: -1px 0 0 0; 
}

.blog-wrap .scroll a {
  color: #00aced;  
}

.blog-wrap .blog-additions {
  float: right;
  width: 238px;
  margin: 0 0 20px 0;
  padding: 20px;
  font-size: 18px;
  border: 1px solid...