JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<div class="grid">
        <div class="elem w140">
            elem1
            <h1>r34</h1>
        </div>
        <div class="elem">elem2</div>
        <div class="elem w200">elem3</div>
        <div class="elem w50">elem4</div>
        <div class="elem">elem5</div>
        <div class="elem">elem6</div>
        <div class="elem w70">elem7</div>
        <div class="elem w50">elem8</div>
        <div class="elem">elem9</div>
        <div class="elem w200">elem10</div>
    </div>

CSS

* {
        margin: 0;
        padding: 0;
    }

    html, body {
        width: 100%;
    }

    .elem {
        height: 300px;
        width: 150px;
        background-color: rgba(230,230,230,1);
        -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
        box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
        margin: 20px;
        padding: 10px;
        /* float: left; */
        transition: all 0.5s ease;
    }

    .elem:hover {
        -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
        -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
        box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
        margin: 10px;
        padding: 20px;
        background-color: rgba(130,230,230,1);
    }

    h1 {
        color: rgba(0,0,0,0.0);
        transition: all 0.5s ease;
    }

    .elem:hover  h1 {
        color: rgba(0,0,0,1.0);
    }

    .w140 { width: 140px; }
    .w70  { width: 70px;  }
    .w200 { width: 200px; }
    .w50  { width: 50px;  }

    .grid {
        width: 100%;
        display:-webkit-box;
        display:-webkit-flex;
        display:-moz-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }