JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
  
  <div class="row">
    <div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div id="kpop" class="selection">

      </div>
      <!--kpop-->

      <div id="fashion" class="selection">

      </div>
      <!--fashion-->

    </div>
  <!--first column-->
    <div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div id="martialarts" class="selection">

      </div>
      <!--martial arts-->

      <div id="nature" class="selection">

      </div>
      <!--nature-->

    </div>
  <!--second column-->
  </div>

</div>
<!--container-->

CSS

body .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.full-width {
  margin: 0;
  padding: 0;
}

.selection {
	height: 50vh;
}

#kpop {
	background: #7BECED;
}

#fashion {
	background: #FFB5A7;
}

#martialarts {
	background: #F3BB72;
}

#nature {
	background: #B1DC76;
}