JSFiddle - React, Tailwind, and code Playground

by bazmegakapa

HTML

<!DOCTYPE html><html><head><title></title>
    </head>
    <body>

    <ul class="grid">
      <li class="item small">
          <a href="#" title="Title 1">
          <img src="#" />
          </a>
      </li>
      <li class="item small">
          <a href="#" title="Title 2">
          <img src="#" />
          </a>
      </li>
      <li class="item large">
          <a href="#" title="Title 3">
              <img src="#" />
          </a>
      </li>
      <li class="item large">
          <a href="#" title="Title 4">
              <img src="#" />
          </a>
      </li>
      <li class="item large">
          <a href="#" title="Title 5">
          <img src="#" />
          </a>
      </li>
      <li class="item large">
          <a href="#" title="Title 6">
          <img src="#" />
          </a>
      </li>
      <li class="item small">
          <a href="#" title="Title 7">
          <img src="#" />
          </a>
      </li>
      <li class="item small">
          <a href="#" title="Title 8">
          <img src="#" />
          </a>
      </li>
      <li class="item large">
          <a href="#" title="Title 9">
          <img src="#" />
          </a>
      </li>
      <li class="item small">
          <a href="#" title="Title 10">
          <img src="#" />
          </a>
      </li>
      <li class="item small">
          <a href="#" title="Title 11">
          <img src="#" />
          </a>
      </li>
      <li class="item large">
          <a href="#" title="Title 12">
          <img src="#" />
          </a>
      </li>
    </ul>
    </body>
    </html>

CSS

ul,li { margin: 0; padding: 0; }
a, a:hover { text-decoration: none; border: 1px solid black; }

.grid { width: 984px; margin: 0 auto; list-style: none; height: 666px; }
.grid li { float: left; position: relative; }
.small + .small { margin: 111px 0 0 -198px; }
.small + .small a { background: yellow; }
.large, .large a, .large img { width: 393px; height: 222px; background: red; }
.small, .small a, .small img { width: 198px; height: 111px; background: blue; }
.item a { display: block; cursor: pointer; color: #fff; }