JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
    * { margin:0; padding:0;}
        .wrap { width: 800px; margin: 0 auto;overflow: hidden;}
        .wrap div { float: left;}
            .b1 { width: 100px; height: 200px; background: #393; margin-right: 3px; margin-bottom: 3px;}
            .b2 { width: 500px; height: 100px; background: #069; margin-right: 3px; margin-bottom: 3px;}
            .b3 { width: 194px; height: 100px; background: #0FF; margin-bottom: 3px;}
            
            
            .b4 {  width: 93px; height: 250px; background: #F30;margin-right: 3px;}
            .b5 { 
                width: 600px; 
                height: 190px; 
                background: #FF3;
                margin-bottom: 3px;
            }
            
            .b6 {  width: 400px; height: 57px; background: #9F3; }
            
            .b7 { width: 198px; height: 57px; background: #69F;margin-left: 3px;}
            
            .b8 {  width: 100px; height: 150px; background: #630; margin-top: -150px;}
            
            .b9 { width: 196px; height: 120px; background: #606; margin-right: 3px;margin-top: 3px;}
            
            .b10 {  width: 601px; height: 120px; background: #CF6;margin-top: 3px;}
</style>
</head>

<body>

    <div class="wrap">
        <div class="b1">B1</div>
        <div class="b2">B2</div>
        <div class="b3">B3</div>
        <div class="b4">B4</div>
        <div class="b5">B5</div>
        <div class="b6">B6</div>
        <div class="b7">B7</div>
        <div class="b8">B8</div>
        <div class="b9">B9</div>
        <div class="b10">B10</div>
    </div>

</body>
</html>