JSFiddle - React, Tailwind, and code Playground

by abang ichal

HTML

<div class="tulisan">
     <h1>Ini Cara Gue</h1>

    <img src="url gambar" />
    <p>ini cara gue bikin postingan dengan tampilan berbeda...</p>
    <p>anda boleh mengedit sesuka hati anda, terserah apa saja dan seterusnya...</p>
</div>
<div class="ketikan">
    <p>terserah mau diapain :p</p>
</div>

CSS

body {
    background:yellow;
}
.sidebar, #sidebar-wrapper {
    display:none;
}
#post-wrapper, .post {
    margin:0 auto;
    float:none;
    width:100%;
}
.post-title h2, .post-title h1 {
    display:none
}
.tulisan {
    background:#f00;
    width:400px;
    max-width:100%;
    border:4px solid #000;
}
.tulisan h1 {
    font-family:impact;
    color:blue;
    text-align:center;
    text-shadow:1px 1px #fff
}
.tulisan img {
    border:10px solid #fff;
    width:100px;
}
.tulisan p {
    font-family:Arial;
    font-size:15px;
    color:#fff;
}
.ketikan {
    background:#fff;
    width:400px;
    max-width:100%;
    border:4px solid blue;
    margin-top:10px;
}
.ketikan p {
    font-family:Times New Roman;
    font-size:25px;
    color:green;
}