JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainContentContainer">
        <div id="mainContent">

                            <div class="postTitle">
                                test
                            </div>
                            <div class="posterInfo">
                                <img width="40%" class="profilePic" src="/site/uploads/avatars/f3780c97491dd9f62f0dd7b1b8bb090a0b9e87d0.png">
                                <p>Posted by: <a class="postedBy" href="#">test</a></p>
                            </div>
                            <div class="postContent">
                                <div class="postImageContainer" align="center">
                                    <img class="postImage" src="../uploads/img/test">
                                </div>

                                <div class="post">
                                    <p>test</p>
                                </div>
                            Comments have been disabled for this post.</div>                </div>
        <div id="sidebar">
            Welcome, Admin<br><a href="logout.php">Logout</a><br></div> </div>
</div>

CSS

body {
        margin: 0px;
        background-color: #6C9DDF;
        background-image:url("/assets/img/background.png");
        background-repeat: no-repeat;
    }


    .hq {
        position:relative;
        top:40px;
        width:1300px;
        height:100%;
        left:1%;
    }
    #logo {
        position:absolute;
        width:40%;
        height:30%;
        right:30%;
        z-index: 100;
    }
    #homebtn, #playbtn, #newsbtn, #helpbtn {
        background: url(/assets/img/menubtns.png) no-repeat;
    }
    #homebtn {
        background-image: url("/assets/img/home.png");
        background-repeat:no-repeat;
        background-size: 75%;
        width: 204px;
        height: 184px;
        position: absolute;
        top: 318px;
        left: 353px;
    }
    #homebtn:hover {
        background-image: url("/assets/img/home-rollover.png");
    }
    #playbtn {
        background-image: url("/assets/img/play.png");
        background-repeat:no-repeat;
        background-size: 100%;
        width: 200px;
        height: 230px;
        position: absolute;
        top: 240px;
        left: 480px;
    }
    #playbtn:hover {
        background-image: url("/assets/img/play-rollover.png");
    }
    #newsbtn {
        background-image: url("/assets/img/news.png");
        background-repeat:no-repeat;
        background-size: 100%;
        width: 290px;
        height: 290px;
        position: absolute;
        top: 210px;
        left: 650px;
    }
    #newsbtn:hover {
        background-image: url("/assets/img/news-rollover.png");
    }
    #helpbtn {
        background-image: url("/assets/img/help.png");
        background-repeat:no-repeat;
        background-size: 100%;
        width: 330px;
        height: 380px;
        position: absolute;
        top: 180px;
        left: 930px;
    }
    #helpbtn:hover {
        background-image: url("/assets/img/help-rollover.png");
    }

    #mainContentContainer {
        border-radius: 30px 30px 30px 30px;
  ...