JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<h1>Container12: Column width=60px  Number of columns=12  Gutter width=20px   Content width=940px  Full width=960px</h1>
    <div class="container12 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>
    <div class="container12 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>
    <div class="container12 clearfix mvm">
        <div class="grid3">3</div>
        <div class="grid3">3</div>
        <div class="grid3">3</div>
        <div class="grid3">3</div>
    </div>
    <div class="container12 clearfix mvm">
        <div class="grid4">4</div>
        <div class="grid4">4</div>
        <div class="grid4">4</div>
    </div>
    <div class="container12 clearfix mvm">
        <div class="grid6">6</div>
        <div class="grid6">6</div>
    </div>
    <div class="container12 clearfix mvm">
        <div class="grid1">1</div>
        <div class="grid11">11</div>
    </div>
    <div class="container12 clearfix mvm">
        <div class="grid2">2</div>
        <div class="grid10">10</div>
    </div>
    <div class="container12 clearfix mvm">
        <div class="grid3">3</div>
        <div class="grid9">9</div>
    </div>
    <div class="container12 clearfix mvm">
        <div class="grid4">4</div>
        <div class="grid8">8</div>
    </div>
    <div class="container12 clearfix mvm">
        <div class="grid5">5</div>
        <div class="grid7">7</div>
    </div>

CSS

/*=========================================================================
 *    960 Grid System ~ Core CSS.
 *    Learn more ~ http://960.gs/
 *  Create more ~ http://grids.heroku.com/
 *    Licensed under GPL and MIT.
 *=========================================================================*/
 
/*=========================================================================
 *Container: width=960px;
 *Html Markup
 *     <div class="container12 clearfix">
 *                <div class="grid4">4</div>
 *                <div class="grid8">8</div>
 *     </div>
 *=========================================================================*/
.container12 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
} 

/*==========================================================================
 *container12: 
 *Column width= 60px 
 *Number of columns= 12px  
 *Gutter width= 20px  
 *Content width=940px  
 *Full width=960px
 *=========================================================================*/
.container12 .grid1,
.container12 .grid2,
.container12 .grid3,
.container12 .grid4,
.container12 .grid5,
.container12 .grid6,
.container12 .grid7,
.container12 .grid8,
.container12 .grid9,
.container12 .grid10,
.container12 .grid11,
.container12 .grid12 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}

.container12 .grid1 {
    width:60px;
}

.container12 .grid2 {
    width:140px;
}

.container12 .grid3 {
    width:220px;
}

.container12 .grid4 {
    width:300px;
}

.container12 .grid5 {
    width:380px;
}

.container12 .grid6 {
    width:460px;
}

.container12 .grid7 {
    width:540px;
}

.container12 .grid8 {
    width:620px;
}

.container12 .grid9 {
    width:700px;
}

.container12 .grid10 {
    width:780px;
}

.container12 .grid11 {
    width:860px;
}

.container12 .grid12 {
    width:940px;
}

/*===============================================================================
 * clear and clearfix =>...