JSFiddle - React, Tailwind, and code Playground

by StartPolymer

HTML

<!DOCTYPE html>
<html>
    <head>
        <style>
            .border {
                border: 1px solid black;
                box-sizing: border-box;
                text-align: center;
            }
        </style> 
    </head>
    <body>
        <div style="width: 1000px; max-width: 100%; margin: 0 auto; display: flex; flex-flow: row wrap;">
            <div class="border" style="flex: 0 0 50%; height: 100px">1</div>
            <div class="border" style="flex: 0 0 25%; height: 50px">2</div>
            <div class="border" style="flex: 0 0 25%; height: 50px">3</div>
            <div class="border" style="flex: 0 0 25%; height: 50px">4</div>
            <div class="border" style="flex: 0 0 25%; height: 50px">5</div>
            <div class="border" style="flex: 0 0 50%; height: 100px; margin-top: -50px">6</div>
            <div class="border" style="flex: 0 0 25%; height: 50px">7</div>
            <div class="border" style="flex: 0 0 25%; height: 50px;">8</div>
            <div class="border" style="flex: 0 0 25%; height: 50px">9</div>
            <div class="border" style="flex: 0 0 25%; height: 50px;">10</div>
        </div>
    </body>
</html>