JSFiddle - React, Tailwind, and code Playground

by anthinkingcoder

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<body>
<div id="app">

<Row>
        <i-col :span="4" class="demo-col">span:4</i-col>
        <i-col :span="4" class="demo-col">span:4</i-col>
        <i-col :span="4" class="demo-col">span:4</i-col>
        <i-col :span="4" class="demo-col">span:4</i-col>
        <i-col :span="4" class="demo-col">span:4</i-col>
        <i-col :span="4" class="demo-col">span:4</i-col>
    </Row>

    <br>

    <Row :gutter="30">
        <i-col :span="8">
            <div class="demo-col">gutter:30</div>
        </i-col>
        <i-col :span="8">
            <div class="demo-col">gutter:30</div>
        </i-col>
        <i-col :span="8">
            <div class="demo-col">gutter:30</div>
        </i-col>
    </Row>
    <br>
    <Row>
        <i-col :span="4" :offset="4" class="demo-col">offset:4</i-col>
        <i-col :span="4" class="demo-col">span:4</i-col>
    </Row>
    <br>
    <Row>
        <i-col :span="4"  class="demo-col">col</i-col>
        <i-col :span="8" :push="4" class="demo-col">push:4</i-col>
    </Row>
    <br>
    <Row>
        <i-col :xs="2" :sm="4" :md="6" :lg="8" class="demo-col">Response-Col</i-col>
        <i-col :xs="20" :sm="16" :md="12" :lg="8" class="demo-col">Response-Col</i-col>
        <i-col :xs="2" :sm="4" :md="6" :lg="8" class="demo-col">Response-Col</i-col>
    </Row>
    <br>
    <Row>
        <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="demo-col">Response-Col</i-col>
        <i-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="demo-col">Response-Col</i-col>
        <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="demo-col">Response-Col</i-col>
    </Row>
    <br>
    <Row  type="flex" justify="space-between">
        <i-col :span="4" class="demo-col">
            flex
        </i-col>
        <i-col :span="4" class="demo-col">
            flex
        </i-col>
    </Row>
    <br>
    <Row  type="flex"...

CSS

.demo-col {
            height: 40px;
            line-height: 40px;
        }
        .demo-col-large {
            height: 80px;
            line-height: 80px;
        }
        .demo-col, .demo-col-large {
            text-align: center;
        }
        .demo-col:nth-child(odd) {
            background-color: aqua;
        }
        .demo-col:nth-child(even) {
            background-color: aquamarine;
        }
        * {
            margin: 0;
            padding: 0;
        }















.simple-row {
  display: block;
  position: relative;
  margin: 0;
  height: auto;
  zoom: 1;
  overflow: hidden; }

.simple-row-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.simple-col {
  display: block;
  position: relative; }

.simple-row-flex, .simple-row-flex, .simple-col {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.simple-row-flex-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start; }

.simple-row-flex-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end; }

.simple-row-flex-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.simple-row-flex-space-around {
  -ms-flex-pack: distribute;
      justify-content: space-around; }

.simple-row-flex-space-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.simple-row-flex-top {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }

.simple-row-flex-middle {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.simple-row-flex-bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;...

JavaScript

var app = new Vue({
        el: '#app',
        data: {
            title: 'griddemo'
        }
    })