JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

 <section class="section-about-news">
        <div class="container">
         <div class="row">
         <div class="col-md-6" id="news">Left block</div>
            <div class="col-md-6" id="news">
            <div id="news1">
              
              <h1 class="newsMain">lastest news</h1>
<div class="date"><span>23.12.10 <br> FRIDAY</span></div>
<div class="text"><h1>Lorem ipsum dolor sit amet, consectetur</h1> 
<p>Donec turpis neque, sodales a faucibus at, viverra luctus urna. Suspendisse dignissim neque dui, in tincidunt ...</p>
<a href="#">Read More</a> <i class="fa fa-long-arrow-right" aria-hidden="true"></i> </div>
            </div>
            </div>
            </div>
          </div>
      </section>

CSS

/* line 415, ../scss/base/_base.scss */
#news1, #news2, #news3 {
  margin-top: 30px;
}
/* line 417, ../scss/base/_base.scss */
#news1 .newsMain, #news2 .newsMain, #news3 .newsMain {
  font-family: BEBAS;
  font-size: 25px;
  margin-top: 0px;
  margin-bottom: 43px;
}
/* line 424, ../scss/base/_base.scss */
#news1 .date, #news2 .date, #news3 .date {
  position: relative;
  width: 56px;
  height: 31px;
  background: #edd27d;
  float: left;
  margin-right: 20px;
  font-size: 11px;
  font-family: Arial Regular;
  text-align: center;
  display: inline-block;
}
/* line 437, ../scss/base/_base.scss */
#news1 .date span, #news2 .date span, #news3 .date span {
  vertical-align: middle;
  line-height: normal;
}
/* line 443, ../scss/base/_base.scss */
#news1 .date:after, #news2 .date:after, #news3 .date:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 21px solid #edd27d;
  right: -21px;
  top: 0px;
}
/* line 455, ../scss/base/_base.scss */
#news1 .text, #news2 .text, #news3 .text {
  clear: left;
  display: inline-block;
  margin-left: 14px;
}
/* line 459, ../scss/base/_base.scss */
#news1 .text h1, #news2 .text h1, #news3 .text h1 {
  margin-top: 0;
  color: #c6251a;
  font-size: 15px;
}
/* line 464, ../scss/base/_base.scss */
#news1 .text p, #news2 .text p, #news3 .text p {
  font-size: 13px;
  font-family: Arial Regular;
}
/* line 469, ../scss/base/_base.scss */
#news1 .text .link, #news2 .text .link, #news3 .text .link {
  float: left;
}
/* line 473, ../scss/base/_base.scss */
#news1 .text .link a, #news2 .text .link a, #news3 .text .link a {
  font-family: Arial Regular;
  color: #c6251a;
  text-decoration: none;
  display: inline;
  float: left;
}

/*MODULES - individual site components */
/*LAYOUTS - Page layout styles */