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,
  &:after {
    content: " ";
    clear: both;
    display: table;
  }
}
.col {
  float: left;
  position: relative;
  min-height: 1px;
}
.list_img {
  .row_wrp {
    margin-left: -10px;
    margin-right: -10px;
  }
  .col {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
  }
  img {
    width: 100%;
  }
  .col_left {
    width: 66.6666666667%;
  }
  .col_right {
    width: 33.33331333333%;
  }
  .two_col {
    li {
      width: 50%;
    }
  }
}

JavaScript

/* list_img */