JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<h1>Container32: Column width=20px  Number of columns=32  Gutter width=10px   Content width=950px  Full width=960px</h1>    
    <div class="container32 clearfix mvm">
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
        <div class="grid1">1</div>
    </div>
    <div class="container32 clearfix mvm">
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
    </div>
    <div class="container32 clearfix mvm">
        <div class="grid4">4</div>
      ...

CSS

/*=========================================================================
         *Container: width=960px;
         *Html Markup
         *     <div class="container32 clearfix">
         *                <div class="grid16">16</div>
         *                <div class="grid16">16</div>
         *     </div>
         *=========================================================================*/
        .container32 {
            margin-left: auto;
            margin-right: auto;
            width: 960px;
        }
        
        /*==========================================================================
         *container32: 
         *Column width= 20px 
         *Number of columns= 32px  
         *Gutter width= 10px  
         *Content width=950px  
         *Full width=960px
         *=========================================================================*/
        .container32 .grid1,
        .container32 .grid2,
        .container32 .grid3,
        .container32 .grid4,
        .container32 .grid5,
        .container32 .grid6,
        .container32 .grid7,
        .container32 .grid8,
        .container32 .grid9,
        .container32 .grid10,
        .container32 .grid11,
        .container32 .grid12,
        .container32 .grid13,
        .container32 .grid14,
        .container32 .grid15,
        .container32 .grid16,
        .container32 .grid17,
        .container32 .grid18,
        .container32 .grid19,
        .container32 .grid20,
        .container32 .grid21,
        .container32 .grid22,
        .container32 .grid23,
        .container32 .grid24,
        .container32 .grid25,
        .container32 .grid26,
        .container32 .grid27,
        .container32 .grid28,
        .container32 .grid29,
        .container32 .grid30,
        .container32 .grid31,
        .container32 .grid32,
        .container32 .grid-one-third,
        .container32 .grid-two-thirds {
            display:inline;
            float: left;
            position: relative;
 ...