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="containerFluid12 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="containerFluid12 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="containerFluid12 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="containerFluid12 clearfix mvm">
        <div class="grid4">4</div>
        <div class="grid4">4</div>
        <div class="grid4">4</div>
    </div>
    <div class="containerFluid12 clearfix mvm">
        <div class="grid6">6</div>
        <div class="grid6">6</div>
    </div>
    <div class="containerFluid12 clearfix mvm">
        <div class="grid1">1</div>
        <div class="grid11">11</div>
    </div>
    <div class="containerFluid12 clearfix mvm">
        <div class="grid2">2</div>
        <div class="grid10">10</div>
    </div>
    <div class="containerFluid12 clearfix mvm">
        <div class="grid3">3</div>
        <div class="grid9">9</div>
    </div>
    <div class="containerFluid12 clearfix mvm">
        <div class="grid4">4</div>
        <div class="grid8">8</div>
    </div>
    <div class="containerFluid12 clearfix mvm">
        <div class="grid5">5</div>
        <div...

CSS

body {min-width:960px;} 
/*===========================================================================================
 *    Variable Grid System (Fluid Version).
 *    Learn more ~ http://www.spry-soft.com/grids/
 *    Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/
 *    Licensed under GPL and MIT.
 *==========================================================================================*/
 
 /*=========================================================================
  *Container: width=960px;
  *Html Markup
  *     <div class="containerFluid12 clearfix">
  *                <div class="grid4">4</div>
  *                <div class="grid8">8</div>
  *     </div>
  *=========================================================================*/ 
  body {
    min-width: 960px;
  }
  
  .containerFluid12,
  .containerFluid16,
  .containerFluid24,
  .containerFluid32 {
      width: 92%;
      margin-left: 4%;
      margin-right: 4%;
  }  
/*==========================================================================
 *container12: 
 *Column width= 60px 
 *Number of columns= 12px  
 *Gutter width= 20px  
 *Content width=940px  
 *Full width=960px
 *=========================================================================*/
.containerFluid12 .grid1,
.containerFluid12 .grid2,
.containerFluid12 .grid3,
.containerFluid12 .grid4,
.containerFluid12 .grid5,
.containerFluid12 .grid6,
.containerFluid12 .grid7,
.containerFluid12 .grid8,
.containerFluid12 .grid9,
.containerFluid12 .grid10,
.containerFluid12 .grid11,
.containerFluid12 .grid12 {
     display:inline;
     float: left;
     position: relative;
     margin-left: 1%;
     margin-right: 1%;
     margin-left: 0.92%\9;
     margin-right: 0.92%\9;
     _margin-left: 0.8%;
     _margin-right: 0.8%;
} 

.containerFluid12 .grid1 {
    width:6.333%;
}

.containerFluid12 .grid2 {
    width:14.667%;
}

.containerFluid12 .grid3 {
    width:23.0%;
}

.containerFluid12 .grid4 {
   ...