JSFiddle - React, Tailwind, and code Playground

by von

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="style.css">

    </head>
    <body>

        <main>
            <div class="gallery" style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));">
                <figure>
                    <span class="image-span">
                        <img data-title="Image 0" data-description="Lorem Ipsum is simply dummy text of the printing and typesetting industry" data-index="0" src="https://source.unsplash.com/random/1920x1080?0" class="image" style="height: 200px;">
                    </span>
                </figure>

                <figure>
                    <span class="image-span">
                        <img data-title="Image 1" data-description="Lorem Ipsum is simply dummy text of the printing and typesetting industry" data-index="1" src="https://source.unsplash.com/random/1920x1080?1" class="image" style="height: 200px;">
                    </span>
                </figure>

                <figure>
                    <span class="image-span">
                        <img data-title="Image 2" data-description="Lorem Ipsum is simply dummy text of the printing and typesetting industry" data-index="2" src="https://source.unsplash.com/random/1920x1080?2" class="image" style="height: 200px;">
                    </span>
                </figure>
            </div>
            <div class="mid-div"></div>
            <div class="modal hide">
                <div class="modal-box">
                    <span class="close">×</span>
                    <i class="fa fa-arrow-right fa-5x" aria-hidden="true"></i>
                    <i class="fa fa-arrow-left fa-5x" aria-hidden="true"></i>
                    <img...