JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<h1>Container16: Column width=60px  Number of columns=16  Gutter width=20px   Content width=940px  Full width=960px</h1>
    <div class="container16 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>
    <div class="container16 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>
    <div class="container16 clearfix mvm">
        <div class="grid4">4</div>
        <div class="grid4">4</div>
        <div class="grid4">4</div>
        <div class="grid4">4</div>
    </div>
    <div class="container16 clearfix mvm">
        <div class="grid-one-third">1/3</div>
        <div class="grid-one-third">1/3</div>
        <div class="grid-one-third">1/3</div>
    </div>
    <div class="container16 clearfix mvm">
        <div class="grid-one-third">1/3</div>
        <div class="grid-two-thirds">2/3</div>
    </div>
    <div class="container16 clearfix mvm">
        <div class="grid4">4</div>
        <div class="grid6">6</div>
        <div class="grid6">6</div>
    </div>
    <div class="container16 clearfix mvm">
        <div class="grid8">8</div>
        <div class="grid8">8</div>
    </div>
    <div class="container16 clearfix mvm">
        <div class="grid1">1</div>
        <div...

CSS

/*=========================================================================
 *Container: width=960px;
 *Html Markup
 *     <div class="container12 clearfix">
 *                <div class="grid4">4</div>
 *                <div class="grid8">8</div>
 *     </div>
 *=========================================================================*/
.container16{
    margin-left: auto;
    margin-right: auto;
    width: 960px;
} 

/*==========================================================================
 *container16: 
 *Column width= 40px 
 *Number of columns= 16px  
 *Gutter width= 20px  
 *Content width=940px  
 *Full width=960px
 *=========================================================================*/
.container16 .grid1,
.container16 .grid2,
.container16 .grid3,
.container16 .grid4,
.container16 .grid5,
.container16 .grid6,
.container16 .grid7,
.container16 .grid8,
.container16 .grid9,
.container16 .grid10,
.container16 .grid11,
.container16 .grid12,
.container16 .grid-one-third,
.container16 .grid-two-thirds,
.container16 .grid13,
.container16 .grid14,
.container16 .grid15,
.container16 .grid16 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
} 
.container16 .grid1 {
    width:40px;
}

.container16 .grid2 {
    width:100px;
}

.container16 .grid3 {
    width:160px;
}

.container16 .grid4 {
    width:220px;
}

.container16 .grid5 {
    width:280px;
}

.container16 .grid-one-third {
    width: 300px;
}

.container16 .grid6 {
    width:340px;
}

.container16 .grid7 {
    width:400px;
}

.container16 .grid8 {
    width:460px;
}

.container16 .grid9 {
    width:520px;
}

.container16 .grid10 {
    width:580px;
}

.container16 .grid-two-thirds {
    width: 620px;
}

.container16 .grid11 {
    width:640px;
}

.container16 .grid12 {
    width:700px;
}

.container16 .grid13 {
    width:760px;
}

.container16 .grid14 {
    width:820px;
}

.container16 .grid15 {
    width:880px;
}

.container16 .grid16 {
   ...