JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!DOCTYPE html>
<html lang="id-ID">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Responsive Layout Grid System 12 Columns</title>
<link href="https://plus.google.com/116377306809477014805/about" rel="author">
</head>
<body>
<div class="dhoma judul">
    <div class="dh12">
    <h1>Responsive Layout Grid System 12 Columns</h1>
    </div>
</div>
<div class="dhoma gird">
<div class="kosong"></div>
<div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div><div class="dh1"><p>1</p></div>
<div class="bersih"></div>
<div class="dh2"><p>2</p></div><div class="dh2"><p>2</p></div><div class="dh2"><p>2</p></div><div class="dh2"><p>2</p></div><div class="dh2"><p>2</p></div><div class="dh2"><p>2</p></div>
<div class="bersih"></div>
<div class="dh3"><p>3</p></div><div class="dh3"><p>3</p></div><div class="dh3"><p>3</p></div><div class="dh3"><p>3</p></div>
<div class="bersih"></div>
<div class="dh4"><p>4</p></div><div class="dh4"><p>4</p></div><div class="dh4"><p>4</p></div>
<div class="bersih"></div>
<div class="dh5"><p>5</p></div><div class="dh5"><p>5</p></div><div class="dh2"><p>2</p></div>
<div class="bersih"></div>
<div class="dh6"><p>6</p></div><div class="dh6"><p>6</p></div>
<div class="bersih"></div>
<div class="dh7"><p>7</p></div><div class="dh5"><p>5</p></div>
<div class="bersih"></div>
<div class="dh8"><p>8</p></div><div class="dh4"><p>4</p></div>
<div class="bersih"></div>
<div class="dh9"><p>9</p></div><div class="dh3"><p>3</p></div>
<div class="bersih"></div>
<div class="dh10"><p>10</p></div><div class="dh2"><p>2</p></div>
<div class="bersih"></div>
<div class="dh11"><p>11</p></div><div class="dh1"><p>1</p></div>
<div...

CSS

.kosong{clear:both;display:block;overflow:hidden;margin-bottom:10px}
.bersih{clear:both;display:block;overflow:hidden}
.dhoma{width:100%;margin:0;overflow:hidden}
.dh1{width:6.25%}.dh2{width:14.583333333333334%}
.dh3{width:22.916666666666664%}.dh4{width:31.25%}
.dh5{width:39.58333333333333%}.dh6{width:47.91666666666667%}
.dh7{width:56.25%}.dh8{width:64.58333333333334%}
.dh9{width:72.91666666666666%}.dh10{width:81.25%}
.dh11{width:89.58333333333334%}.dh12{width:97.91666666666666%}
.dh1,.dh2,.dh3,.dh4,.dh5,.dh6,.dh7,.dh8,
.dh9,.dh10,.dh11,.dh12{display:inline;float:left;margin:0 1.0416666666666665%}

/*Grid Responsive*/
@media screen and (max-width:720px){
.dh1,.dh2,.dh3,.dh4,.dh5,.dh6,.dh7,.dh8,.dh9,.dh10,.dh11,.dh12{width:97.91666666666666%;margin-bottom:1em}}

/*Customasi Layout*/
.judul, .gird {
    background:#272727;
}
.judul h1{
line-height:1.3em;font-size:2.2em;text-decoration:none;color:rgba(0, 0, 0, .8);text-shadow: 0 1px 1px rgba(255, 255, 255, .3), 0 0 0 #000;text-align:center
}
.gird p {
    border-radius: 5px 5px 5px 5px;
    background:#222;box-shadow:0 2px 8px rgba(0, 0, 0, .4) inset;border:1px solid #000;
    text-shadow:2px 0 2px #000;
    color: #fff;
    font-family: Georgia;
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px;
      text-align: center;
     -webkit-hyphens:auto;
     -moz-hyphens:auto;
      hyphens:auto;
      margin-bottom:15px;
      line-height:1.3em
}