JSFiddle - React, Tailwind, and code Playground

by Arun_pandian_k

HTML

<ul id="homepage-grid">
        <li id="tile11" class="col1 row1 sizex1 sizey1">
            <a href="#" title="test">
                <img src="http://placehold.it/295x160" alt="test" title="test" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile8" class="col2 row1 sizex2 sizey1 last">
            <a href="#" title="test">
                <img src="http://placehold.it/602x160" alt="test" title="test" style="width: 602px;height: 160px" />
            </a>
        </li>
        <li id="tile1" class="col1 row2 sizex1 sizey1">
            <a href="#" title="testing">
                <img src="http://placehold.it/295x160" alt="testing" title="testing" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile12" class="col2 row2 sizex1 sizey2">
            <a href="#" title="test">
                <img src="http://placehold.it/295x332" alt="test" title="test" style="width: 295px;height: 332px" />
            </a>
        </li>
        <li id="tile2" class="col3 row2 sizex1 sizey1 last">
            <a href="#" title="testing2">
                <img src="http://placehold.it/295x160" alt="testing2" title="testing2" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile10" class="col1 row3 sizex1 sizey2">
            <a href="#" title="test">
                <img src="http://placehold.it/295x332" alt="test" title="test" style="width: 295px;height: 332px" />
            </a>
        </li>
        <li id="tile9" class="col3 row3 sizex1 sizey1 last">
            <a href="#" title="test">
                <img src="http://placehold.it/295x160" alt="test" title="test" style="width: 295px;height: 160px" />
            </a>
        </li>
        <li id="tile4" class="col2 row4 sizex2 sizey1 last">
            <a href="#" title="test3">
                <img src="http://placehold.it/602x160" alt="test3" title="test3" style="width: 602px;height: 160px" />
            </a>
    ...

CSS

/*! normalize.css v1.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
 * and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin...