JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header class="site-title">
        <h1>My Blog</h1>
    </header>
        <div class="rounded-box">
        <article class="post">
            <header class="post-header">
                <h2 class="post-title">ldkjdlkjd</h2>
            </header>
            <div class="post-body">
                <p>dlkjdadfadf</p>
            </div>
        </article>
    </div>
    <div class="rounded-box">
        <article class="post">
            <header class="post-header">
                <h2 class="post-title">My Third Post</h2>
            </header>
            <div class="post-body">
                <p>Here is some text for my third blog post!</p>
            </div>
        </article>
    </div>
    <div class="rounded-box">
        <article class="post">
            <header class="post-header">
                <h2 class="post-title">Title </h2>
            </header>
            <div class="post-body">
                <p>dlkjlkjdlkj</p>
            </div>
        </article>
    </div>
    <div class="rounded-box">
        <article class="post">
            <header class="post-header">
                <h2 class="post-title">A new post</h2>
            </header>
            <div class="post-body">
                <p>dlkjdlkjdlkjdlkjdlkjdlkjhbiduha;igvpiaudgbpiasgd;vabs;aishd;aeih</p>
            </div>
        </article>
    </div>
</body>

CSS

body {
    max-width: 800px;
    margin: 0 auto;
}
header.site-title {
    border-bottom: gainsboro solid thick;
}
.rounded-box {
  background-color: #959392;
  border-radius: 15px;
}

article {
  //display: block;
  clear: both;
  margin: 10px 10px 10px 10px;
}