JSFiddle - React, Tailwind, and code Playground

by diaryfakta

HTML

<html>
<head>
<title>Blog Saya Pribadi</title>
</head>
<body>
<header><h1>Blog Saya Pribadi</h1></header>
<div id='penengah'>
<article>
<h2>Judul artikel</h2>
<p>Disini hanya judul artikel, dan cuma ngasal dibuat supaya mirip kaya template asli gua mohon lu ngerti ya.</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Disini hanya judul artikel, dan cuma ngasal dibuat supaya mirip kaya template asli gua mohon lu ngerti ya.</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Disini hanya judul artikel, dan cuma ngasal dibuat supaya mirip kaya template asli gua mohon lu ngerti ya.</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Disini hanya judul artikel, dan cuma ngasal dibuat supaya mirip kaya template asli gua mohon lu ngerti ya.</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Disini hanya judul artikel, dan cuma ngasal dibuat supaya mirip kaya template asli gua mohon lu ngerti ya.</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Disini hanya judul artikel, dan cuma ngasal dibuat supaya mirip kaya template asli gua mohon lu ngerti ya.</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Disini hanya judul artikel, dan cuma ngasal dibuat supaya mirip kaya template asli gua mohon lu ngerti ya.</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Disini hanya judul artikel, dan cuma ngasal dibuat supaya mirip kaya template asli gua mohon lu ngerti ya.</p>
</article>
</div>
<div class='clear'/>
<footer>
<div class='foot1'>
<h3>Judul Footer</h3>
Disini adalah Child dari Footer
</div>
<div class='foot1'>
<h3>Judul Footer</h3>
Disini adalah Child dari Footer
</div>
<div class='foot1'>
<h3>Judul Footer</h3>
Disini adalah Child dari Footer
</div>
<div class='clear'/>
</footer>
</body>
</html>

CSS

body{
background:#fff;
margin:0;
padding:0;
}
.clear{
clear:both;
}
header{
background:#ddd;
padding:5px;
border-bottom:1px solid #aaa;
text-align:center;
font-family:Arial;
font-size:13px;
font-weight:bold;
color:#333;
text-shadow:1px 0 0 #fff;
}
header:hover{
color:#111;
}
article{
width:200px;
border:solid 1px #aaa;
margin:13px;
padding:10px;
background:#ddd;
float:left;
word-wrap:break-word;
}
article h2{
border-bottom:solid 1px #aaa;
padding-bottom:3px;
text-align:center;
font-size:25px;
}
article p{
font-family:Arial;
font-size:13px;
}
#penengah{
margin:0 auto;
}
footer{
height:auto;
position:relative;
bottom:0;
left:0;
padding:10px;
background:#ddd;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
}
footer .foot1{
float:left;
width:300px;
border-left:solid 1px #aaa;
box-shadow:-1px 0 0 #eee;
padding:10px;
height:auto;
}