JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<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>

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;
}
article {
    overflow:auto;
}