JSFiddle - React, Tailwind, and code Playground

HTML

<div class="collage">
  <div class="collage-item"></div>
  <div class="collage-item"></div>
  <div class="collage-item"></div>
  <div class="collage-item"></div>
  <div class="btn">View all 11 photos</div>
</div>

SCSS

* {
  box-sizing: border-box;
}

// Default
// ----------------------------------------------------
.collage {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.collage-item {
  width: 100%;
  height: 25vw;
  background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat;
  background-size: cover;
  flex: 0 0 50%;
  
  &:nth-child(1) {
    margin-bottom: 16px;
  }
  
  &:nth-child(2) {
     margin-right: 16px;
  }
  
   &:nth-child(4) {
    margin-top: 16px;
  }
  
  &:nth-child(1), &:nth-child(4) {
    flex: 0 0 100%;
    height: 50vw;
  }
}


// Button
// ----------------------------------------------------

.btn {
  position: absolute;
  border: 2px solid white;
  padding: 10px 18px;
  text-align: center;
  right: 16px;
  bottom: 16px;
  color: white;
  text-decoration: none;
}