JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://mdo.github.io/table-grid/table-grid.css">
<div id="app">

<div id="home">
<div class="grid grid-align-middle h-100p">
<div class="col col-12 dark-opacity">
<div class='h1 text-center'>Portal Nabire</div>
</div>
</div>
</div>

<div id="sipkd" class="text-center">
<div class="grid grid-align-middle h-100p dark-opacity">
<div class="col col-12">
<div class='h1'>SIPKD</div>
<div class='h6'>Sistem Informasi Pengelolaan Keuangan Daerah</div>
<div>adalah...</div>
  <div class='grid'>
  <div class="col col-6">
  <div class='h3'>SIPKD BPKAD</div>
  <div>keterangan/digunakan untuk...</div>
  </div>
  <div class="col col-6">
  <div class='h3'>SIPKD SKPD</div>
  <div>keterangan/digunakan untuk...</div>
  </div>
  </div>
</div>
</div>
</div>

<div id="siexda">
<div class="grid grid-align-middle h-100p">
<div class="col col-12 dark-opacity text-center">
<div class='h1'>SIEXDA</div>
<div class='h6'>Sistem Informasi Eksekutif Daerah</div>
<div>keterangan/digunakan untuk...</div>
</div>
</div>
</div>

<div id="sikasda">
<div class="grid grid-align-middle h-100p">
<div class="col col-12 dark-opacity text-center">
<div class='h1'>SIKASDA</div>
<div class='h6'>Sistem Informasi Pengelolaan Kas Daerah</div>
<div>keterangan/digunakan untuk...</div>
</div>
</div>
</div>

<div id="sicampur">
<div class="grid grid-align-middle h-100p">
<div class="col col-12 dark-opacity text-center">

<div class='h1'>LAIN-LAIN</div>
<div class='grid'>
<div class="col col-6 h4"><a>Penyusutan APBD</a></div>
<div class="col col-6 h4"><a href='#'>WEBSITE BPKAD</a></div>
<div class="col col-6 h4"><a href='#'>APB DESA</a></div>
</div>
<br/>
<div class='grid'>
<div class="col col-6 h4"><a href='#'>Statistika KEUDA</a></div>
<div class="col col-6 h4"><a href='#'>Aset...

CSS

html, html>body,#app,#home,#sipkd,#siexda,#sikasda,#sicampur,.h-100p {
  height: 100%;
}
#app>div .dark-opacity {
  color: white;
  background-color: rgba(34, 34, 34, 0.5);
}
#app {
  background-color: red;
}
#app > div {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
#home {
  background-color: green;
  background-image: url(https://googledrive.com/host/0B1wBWaKkdgTzRzFYemF1TmVWLWc/IMG_20160122_110941.jpg);
}
#sipkd {
  background-color: blue;
  background-image: url(https://googledrive.com/host/0B1wBWaKkdgTzRzFYemF1TmVWLWc/IMG_20160127_172032.jpg);
}
#siexda {
  background-color: purple;
  background-image: url(https://googledrive.com/host/0B1wBWaKkdgTzRzFYemF1TmVWLWc/IMG_20160127_172052.jpg);
}
#sikasda {
  background-color: yellow;
  background-image: url(https://googledrive.com/host/0B1wBWaKkdgTzRzFYemF1TmVWLWc/IMG_20160122_110941.jpg);
}
#sicampur {
  background-color: brown;
  background-image: url(https://googledrive.com/host/0B1wBWaKkdgTzRzFYemF1TmVWLWc/IMG_20160127_172032.jpg);
}