JSFiddle - React, Tailwind, and code Playground

by agus makmun

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flat Color Awesome</title>
<meta name="description" content="Flat Color Awesome." />
<meta name="keywords" content="Flat Color, Kode Warna, Warna CSS, Flat Color UI, Colors, Color HTML "/>
<meta name="author" content="Agus Makmun" />

<link href='images/favicon.ico' rel='icon' type='image/x-icon'/>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="menu">
    <ul>
        <li><a href="http://upload.python.web.id/Flat%20Color%20Awesome.html">Home</a></li>
        <li><a href="http://semua-tinggal-download.blogspot.com/">Blog</a></li>
        <li><a href="http://upload.python.web.id/Contact%20Form.html">Contact</a></li>
    </ul>
</div>
<div id="content">
    <div class="ula" id="content">
        <li style="background:#5C97BF;">Kode Warna: #5C97BF</li>
        <li style="background:#4B77BE;">Kode Warna: #4B77BE</li>
        <li style="background:#1F3A93;">Kode Warna: #1F3A93</li>
        <li style="background:#2574A9;">Kode Warna: #2574A9</li>
        <li style="background:#67809F;">Kode Warna: #67809F</li>
        <li style="background:#34495E;">Kode Warna: #34495E</li>
        <li style="background:#3A539B;">Kode Warna: #3A539B</li>
        <li style="background:#1E8BC3;">Kode Warna: #1E8BC3</li>
        
        <li style="background:#6BB9F0;">Kode Warna: #6BB9F0</li>
        <li style="background:#22313F;">Kode Warna: #22313F</li>
        <li style="background:#336E7B;">Kode Warna: #336E7B</li>
        <li style="background:#19B5FE;">Kode Warna: #19B5FE</li>
        <li style="background:#89C4F4;">Kode Warna: #89C4F4</li>
        <li style="background:#2C3E50;">Kode Warna: #2C3E50</li>
        <li style="background:#3498DB;">Kode Warna: #3498DB</li>
        <li...

CSS

@charset "utf-8";
/* CSS Document

	Website Name: Flat Color Awesome
	Design By: Agus Makmun
	Date Crated: 4 Jully 2014
	Url1: http://semua-tinggal-download.blogspot.com/
	Url2: http://python.web.id/
	
*/

a:link {
	color:#39F;
	text-decoration:none;
}
a:hover {
	color:#39F;
}
a:visited {
	color:#39F;
}
::selection {background:#000000;color:#fff;}
::-moz-selection {background:#000000;color:#fff;}
::-webkit-selection {background:#000000;color:#fff;}
body {
	margin:0 auto;
	padding:0;
	width:100%;
	background:#3F0;
}
#menu {
	position: fixed;
	margin: 0 auto;
	width: 100%;
	height: 42px;
	background: #444;
	border-bottom: 1px solid #FFF500;
}
#menu > ul {
	float: left;
	margin: 0 auto;
	width: 100%;
	height: 30px;
	padding: 6px 6px;
}
#menu > ul > li {
	float: left;
	list-style: none;
	padding: 5px 5px;
}
#menu > ul > li > a{
	margin: 0 auto;
	background: linear-gradient(#CA1818,#610000);
	padding: 5px 15px;
	font-size: 1.3em;
	color: #fff;
	text-shadow: 1px 0px #000000;
	font-family: monospace;
	border-radius: 20px;
	text-decoration: none;
}
#content {
	margin: 0 auto;
	width:100%;
	padding:0;
}
#content > .ula {
	float: left;
	margin: 0 auto;
	margin-top: 43px;
	width: 100%;
	background: #C0C0C0;
	padding: 0;
	top: 20px;
}
#content > .ula > li {
	float: left;
	width: 20%;
	padding: 4% 0;
	list-style: none;
	background: #444;
	text-align: center;
	font-family: monospace;
	color: #fff;
	font-size: 14px;
}
#content > .credit {
	padding: 5px 0;
	background: #1F1C36;
	float: left;
	width: 100%;
	text-align: center;
	color: #CFCECE;
	font-family: sans-serif;
	font-size: 12px;
	border-top: 1px solid #D6FF00;
}