JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<h1>Container24: Column width=30px  Number of columns=24  Gutter width=10px   Content width=950px  Full width=960px</h1>    
    <div class="container24 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>
    <div class="container24 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>
    <div class="container24 clearfix mvm">
        <div class="grid4">4</div>
        <div class="grid4">4</div>
        <div class="grid4">4</div>
        <div class="grid4">4</div>
        <div class="grid4">4</div>
        <div class="grid4">4</div>
    </div>
    <div class="container24 clearfix mvm">
        <div class="grid6">6</div>
        <div class="grid6">6</div>
        <div class="grid6">6</div>
        <div class="grid6">6</div>
    </div>
    <div class="container24 clearfix mvm">
   ...

CSS

/*=========================================================================
 *Container: width=960px;
 *Html Markup
 *     <div class="container24 clearfix">
 *                <div class="grid16">4</div>
 *                <div class="grid8">8</div>
 *     </div>
 *=========================================================================*/
.container24{
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}  
/*==========================================================================
 *container24: 
 *Column width= 30px 
 *Number of columns= 24px  
 *Gutter width= 10px  
 *Content width=950px  
 *Full width=960px
 *=========================================================================*/
.container24 .grid1,
.container24 .grid2,
.container24 .grid3,
.container24 .grid4,
.container24 .grid5,
.container24 .grid6,
.container24 .grid7,
.container24 .grid8,
.container24 .grid9,
.container24 .grid10,
.container24 .grid11,
.container24 .grid12,
.container24 .grid13,
.container24 .grid14,
.container24 .grid15,
.container24 .grid16,
.container24 .grid17,
.container24 .grid18,
.container24 .grid19,
.container24 .grid20,
.container24 .grid21,
.container24 .grid22,
.container24 .grid23,
.container24 .grid24 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}

.container24 .grid1 {
    width:30px;
}

.container24 .grid2 {
    width:70px;
}

.container24 .grid3 {
    width:110px;
}

.container24 .grid4 {
    width:150px;
}

.container24 .grid5 {
    width:190px;
}

.container24 .grid6 {
    width:230px;
}

.container24 .grid7 {
    width:270px;
}

.container24 .grid8 {
    width:310px;
}

.container24 .grid9 {
    width:350px;
}

.container24 .grid10 {
    width:390px;
}

.container24 .grid11 {
    width:430px;
}

.container24 .grid12 {
    width:470px;
}

.container24 .grid13 {
    width:510px;
}

.container24 .grid14 {
    width:550px;
}

.container24 .grid15 {
    width:590px;
}

.container24 .grid16 {
...