JSFiddle - React, Tailwind, and code Playground

HTML

<!-- /group/index.php -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <title>CSLearning</title>
    
    <link rel = "stylesheet" type = "text/css" href = "/alt/lib/cspage.css?Thursday 30th of August 2012 12:07:03 PM">
</head><body>
<!-- /group/indexcon.php -->

                <ul class = "toolbar horizontal_menu">
                    <li><a href = "/alt/">CSLearning</a></li>
                    <li><a href = "/alt/group/add/">Create Group</a></li>
                    <li><a href = "/alt/group/find-groups/">Find Groups</a></li>
                    <li><a href = "/alt/logout.php">Logout</a></li>
                </ul><div class = "display_area"><div class = "side_display_area"><div class = "subscription"><a href = "/alt/group/?gid=3" class = "link">The Socialist Party</a><br><a href = "/alt/group/?gid=4" class = "link">Stackoverflow</a><br></div></div><div class = "main_display_area">
                <ul class = "group_navigation horizontal_menu">
                    <li><a href = "/alt/group/?gid=3">The Socialist Party</a></li>
                    
                    <li><a href = "/alt/group/members/?gid=3">Members</a></li>
                    <li><a href = "/alt/group/about/?gid=3">About</a></li>
                </ul>
                <br>
                    <div class = "post">
                        <div class = "head">
                            <a class = "name">Slash</a>
                        </div>
                        <div class = "body">
                            <p class = "title">Lorem Ipsum</p>
                            <p class = "content">Nullam in eros a dui dignissim accumsan. Maecenas ac diam enim, at molestie diam.</p>
                        </div>
                        <div class = "allreplies">    <div class = "reply">
                                <a class = "name">Jomelle Wong</a>
                                <p class = "content">Duis id feugiat...

CSS

.clear {
    clear:both;
}

.display_area {
    background:#00cc00;
    
    margin-left:auto;
    margin-right:auto;
    padding:5px;
    
    min-width:1000px;
    max-width:90%;
    
    overflow:auto;
}

.display_area * {
    padding:2px;
    margin:2px;
}

.side_display_area {
    background:#66e066;
    float:left;
    min-width:200px;
}

.main_display_area {
    background:#33d633;
    overflow:hidden;
}

.post {
    background:#e6ffe6;
}

.post .head {
    background:#ccf5cc;
    float:left;
    
    min-width:150px;
}

.post .body {
    background:#99ee99;
    overflow:hidden;
}

div.allreplies {
    padding-left:70px;
}

.content {
    padding-left:30px;
    font-family:Lucida Sans Unicode;
    font-size:small;
}

.allreplies {
    font-size:smaller;
    background:#00e600;
}

.reply {
    background:#99eb99;
}

.reply .name {
    font-weight:bold;
}

.horizontal_menu {
    list-style-type:none;
}

.horizontal_menu li {
    float:left;
}

.group_navigation li {
    padding:0px 20px 0px 20px;
}

.toolbar li {
    padding:0px 20px 0px 20px;
}

a {
    text-decoration:none;
}

.row {
    background:#99eb99;
}

.row .option {
    float:right;
}

.row.alternate_color {
    background:#ccf5cc;
}

.user_table .checkbox {
    float:right;
}

.user_table input {
    float:right;
}