JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<!-- list-img -->
<div class="box_container">
    <div>
      <h1>Neighborhood Guides</h1>
      <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>
    </div>
    <div class="list_img">
      <div class="row_wrp">
        <div class="col col_left">
          <ul class="row_wrp two_col">
            <li class="col">
              <img src="http://placehold.it/300x140" width="300" height="140" alt="300x140">
            </li>
            <li class="col">
              <img src="http://placehold.it/300x140" width="300" height="140" alt="300x140">
            </li>
            <li class="col">
              <img src="http://placehold.it/300x140" width="300" height="140" alt="300x140">
            </li>
            <li class="col">
              <img src="http://placehold.it/300x140" width="300" height="140" alt="300x140">
            </li>
          </ul>
        </div>
        <div class="col col_right">
          <img src="http://placehold.it/300x300" width="300" height="300" alt="300x300">
        </div>
      </div>
    </div>
  </div>

CSS

/* list_img */
*,
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*,
::after,
::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
.box_container {
  width: 1000px;
  margin: 0 auto;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
img {
  vertical-align: middle;
  max-width: 100%;
}
.row_wrp:before,
.row_wrp:after {
  content: " ";
  clear: both;
  display: table;
}
.col {
  float: left;
  position: relative;
  min-height: 1px;
}
.list_img .row_wrp {
  margin-left: -10px;
  margin-right: -10px;
}
.list_img .col {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}
.list_img img {
  width: 100%;
}
.list_img .col_left {
  width: 66.6666666667%;
}
.list_img .col_right {
  width: 33.33331333333%;
}
.list_img .two_col li {
  width: 50%;
}

JavaScript

/* list_img */