JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css"></link>
    <title>Basic Portfolio</title>
</head>
<body>
    <div class="hover"></div>
    <!--Header-->
    <div class="main">
        <h1>CYBERBUNK</h1>
    </div>

    <!--Gallery-->
    <div class="row">
        <div class="column">
            <div class="content">
                <img src="/images/img1.jpeg" alt="image1">
            </div>
        </div>
        <div class="column">
            <div class="content">
                <img src="/images/img2.jpeg" alt="image2">
            </div>
        </div>
        <div class="column">
            <div class="content">
                <img src="/images/img3.jpeg" alt="image3">
            </div>
        </div>
        <div class="column">
            <div class="content">
                <img src="/images/img4.jpeg" alt="image4">
            </div>
        </div>
    </div>
    <script src="/app.js">
    </script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

body {
    background-color: #FF0;
    padding: 15x;
    font-family: "Helvetica Neue",sans-serif;
}

.main {
    display: flex;
    justify-content: center;
}

h1 {
    font-size: 50px;
    bottom: 40%;
    color: purple;
}

.row {
    display: flex;
    bottom: 70%;
    height: 400px;
    content:"";
    display: table;
    clear: both;
    padding: 5px;
}

.column {
    width: 100%;
}
.content {
}
img {
    width:100%;
}

body:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
    animation-iteration-count: 3;