JSFiddle - React, Tailwind, and code Playground

by Rebecca Peck

HTML

<div style="position: relative; display: inline-block">
    <img style="width: 100%; height: auto;" src="http://s2.dlnws.com/files/uploads/black-Friday-table-of-contents.jpg">

    <a href="http://dealnews.com/features/black-friday/predictions/tablets-ebook-readers/" style="display: block; position: absolute; top: 0%; left: 0%; width: 33%; height: 25%;"></a>
    <a href="http://dealnews.com/features/black-friday/predictions/apple/" style="display: block; position: absolute; top: 0%; left: 33%; width: 33%; height: 25%;"></a>
    <a href="http://dealnews.com/features/black-friday/predictions/laptops/" style="display: block; position: absolute; top: 0%; left: 66%; width: 33%; height: 25%;"></a>

    <a href="http://dealnews.com/features/black-friday/predictions/hdtvs/" style="display: block; position: absolute; top: 25%; left: 0%; width: 33%; height: 25%;"></a>
    <a href="http://dealnews.com/features/black-friday/predictions/smartphones/" style="display: block; position: absolute; top: 25%; left: 33%; width: 33%; height: 25%;"></a>
    <a href="http://dealnews.com/features/black-friday/predictions/gaming-toys/" style="display: block; position: absolute; top: 25%; left: 66%; width: 33%; height: 25%;"></a>

    <a href="http://dealnews.com/features/black-friday/predictions/beauty/" style="display: block; position: absolute; top: 50%; left: 0%; width: 33%; height: 25%;"></a>
    <a href="http://dealnews.com/features/black-friday/predictions/apparel/" style="display: block; position: absolute; top: 50%; left: 33%; width: 33%; height: 25%;"></a>
    <a href="http://dealnews.com/features/black-friday/predictions/shoes/" style="display: block; position: absolute; top: 50%; left: 66%; width: 33%; height: 25%;"></a>

    <a href="http://dealnews.com/features/black-friday/predictions/home-goods/" style="display: block; position: absolute; top: 75%; left: 0%; width: 33%; height: 25%;"></a>
    <a...

CSS

a {
    border: 1px solid red;
}