JSFiddle - React, Tailwind, and code Playground

by Jake Overall

HTML

<header class="header">
     <h1>Hey there I have a cool site</h1>

</header>
<div class="content">
    <section class="center-content">
        <article class="article">
             <h3 class="article-title">Why Designers are important</h3>
            <summary>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est excepturi amet nesciunt ab magni deleniti impedit delectus architecto dolores atque obcaecati aut quaerat cupiditate nobis reprehenderit ratione consectetur earum mollitia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste numquam nemo ipsa quasi eius quisquam doloremque tenetur dolor veniam dolorem possimus id nesciunt non earum rem dolorum. Provident consequuntur!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur molestias eligendi nobis corporis tempora modi explicabo maiores reprehenderit quod natus officia asperiores fuga ipsam iure fugiat at expedita dolor ut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nobis numquam voluptatibus id at ex perferendis hic doloribus eaque iure beatae sapiente ipsum placeat a dolorum eius sint ad. Deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nemo mollitia odio cum accusantium quae sed unde iure pariatur aliquid nostrum eos eum repellat harum delectus. Sed id harum omnis.</summary>
        </article>
    </section>
    <section class="side-content">
        <article class="side-article">
            <img src="https://boisecodeworks.com/assets/img/challenges/html-site-challenge.jpg" height="100"/>
             <h3 class="side-article-title">Another Article</h3>

            <summary>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur molestias eligendi nobis corporis tempora modi explicabo maiores reprehenderit quod natus officia asperiores fuga ipsam iure fugiat at expedita dolor ut!</summary>
        </article>
    </section>
</div>
<footer>
    <p>COOL DUDE</p>
</footer>

CSS

.header {
    width: 100%;
    background-color: rgb(28, 68, 137);
    color: white;
    border: 1px solid black;
    text-align: center;
    height: 80px;
    margin-bottom: 40px;
}
.content {
    margin-left: 20%;
    margin-bottom: 10px;
    overflow-y: scroll;
    height: 500px;
}
.center-content {
    width: 65%;
    display: inline-block;
}
.side-content {
    width: 28%;
    float: right;
}
.article {
    width: 70%;
    margin: 0 auto;
}
.article-title {
    border-top: 10px solid blue;
    font-size: 32px;
}
.side-article{
    
}
.side-article-title {
    font-size: 20px;
}

.side-article summary {
    font-size: 10px;
}

footer {
    width: 100%;
    height: 200px;
    background-color: rgb(28, 68, 137);
    color: white;
    text-align: center;
    border: 1px solid black;
}