JSFiddle - React, Tailwind, and code Playground

by khamer

CSS

@mixin tiles($gutter: 2rem, $columns: 4, $flow: row nowrap, $justify: space-between) {
    > * {
        margin-bottom: $gutter;
        
        *:last-child {
            margin-bottom: 0;
        }
    }
    .tile > * {
        padding: $gutter;
    }
    @media only screen and (min-width: $medium) {
        display: flex;
        flex-flow: $flow;
        justify-content: $justify;
        margin-left: -$gutter / 2;
        margin-right: -$gutter / 2;
        > * {
            flex-basis: calc(50% - #{$gutter});
            flex-shrink: 0;
            margin-left: $gutter / 2;
            margin-right: $gutter / 2;
        }
    }
    @media only screen and (min-width: $large) {
        > * {
            flex-basis: calc((100% / #{$columns}) - (#{$gutter}));
        }
    }