JSFiddle - React, Tailwind, and code Playground

by Wosley Bago

HTML

<div class="contact">
  <div class="image-container image-container-col-2">
    <div class="image-container-split">
      <p>This is some content and some more and more and more and more </p>
      <p>This is some content</p>
      <p>This is some content</p>
    </div>
    <div class="image-container-split">
      <p>This is some content and some more and more and more and more </p>
      <p>This is some content</p>
      <p>This is some content</p>
    </div>
  </div>  
</div>


<div class="latest_news">
   <div class="image-container image-container-col-2">
       
       <div class="container_fluid">
           <div class="left">
               <h1>heading 1</h1>
               <p>lorem ipsum is a type of content used as example for website development</p>
           </div>
           <div class="right">  
               <h1>heading teo here</h1>  
               <p>this is heading will come out to be one of the greatest contents of all times</p>  
           </div>
         
       </div>
      
      <div class="image-container-split-container">
        <div class="image-container-split">
        </div>
        <div class="image-container-split">
      </div>
    </div>
  
</div>

CSS

p {
  font-size: 1.1em;
  font-family: Arial;
  color: #fff;
}

.image-container {
  position: relative;
  height: 331px;
}

.image-container.image-container-col-2 .image-container-split {
  width: 50%;
}

.image-container:before {
  content: '';
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
  background-repeat: none;
  background-size: cover;
}

.contact{
.image-container-split {
  position: relative;
  height: 100%;
  float: left;
  box-sizing: border-box;
  border: 20px solid transparent;
  border-bottom-color: #fff; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap column;
}

.image-container-split:first-child {
  border-left: none;
}

.image-container-split:last-child {
  border-right: none;
}

.image-container-split:nth-child(odd) {
  padding-left: 20px;
}

.image-container-split:nth-child(even) {
  padding-right: 20px;
}

.image-container-split:after {
  content: '';
  position: absolute;
  top: -20px;
  border: 10px solid #fff;
  border-bottom-color: transparent;
}

.image-container-split:nth-child(odd):after {
  right: -20px;
  border-left-color: transparent;
}

.image-container-split:nth-child(even):after {
  left: -20px;
  border-right-color: transparent;
}

.image-container-split:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -20px;
  right: 0;
  left: 0;
  bottom: -20px;
  border: 20px solid transparent;
  border-bottom-color: #fff;
  opacity: 0.5;
}

.image-container-split:first-child:before {
  border-left: none;
}

.image-container-split:last-child:before {
  border-right: none;
}

.image-container-split:nth-child(odd):before {
  background-color: red;
  right: -20px;
}

.image-container-split:nth-child(even):before {
  background-color: blue;
  left: -20px;
}
}

.latest_news{
  
  p {
 ...