JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<!doctype html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Title</title>
      <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
     <section>
      <img src="http://lorempixel.com/100/100/sports" alt="">
      <img src="http://lorempixel.com/100/100/sports" alt="">
      <img src="http://lorempixel.com/100/100/sports" alt="">
      <img src="http://lorempixel.com/100/100/sports" alt="">
      <img src="http://lorempixel.com/100/100/sports" alt="">
      <img src="http://lorempixel.com/100/100/sports" alt="">
      <img src="http://lorempixel.com/100/100/sports" alt="">
     </section>
    </body>

CSS

section {
    position: relative;
    width: 600px;
}
section img {
    position :absolute;
    display: block;
}
section :nth-child(1) {
    top: 30px;
    left: 80px;
}
section :nth-child(2) {
    top: 30px;
    right: 80px;
}
section :nth-child(3) {
    top: 200px;
    left: 0;
}
section :nth-child(4) {
    top: 200px;
    left: 200px;
}
section :nth-child(5) {
    top: 200px;
    right: 0;
}
section :nth-child(6) {
    top: 400px;
    left: 80px;
}
section :nth-child(7) {
    top: 400px;
    right: 80px;
}