JSFiddle - React, Tailwind, and code Playground

by sandeep

HTML

<div class="post">
            <div class="post_cell">
                <input type="checkbox" />
            </div>
            
            <div class="post_cell">
                <img class="profile_img" src="" height="48">
            </div>
            
            <div class="post_body">
                <div class="post_details">
                                        <div class="icon"></div>
                                        <h2><a href="#" target="_blank" class="no_style">user</a></h2>
                    <span class="post_info"><span class="passed_time" style="display: inline; ">15 hours ago</span> | 
                    <a href="javascript:void(0)" class="no_style toggle_comments">3 Comments</a></span>
                </div>
                    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
                
            </div>
        </div>

CSS

body{
    background-color: #ccc;
}


h2{
    float: left;
    color: #525254;
    margin: 0px;
    font: bold 15px Arial, Helvetica, sans;
}

.post{
    background-color: #fff;
    float: left;
    clear: both;
    padding: 20px;
    width: 500px;
    border-bottom: solid 1px #ddd;
    display:table;
}

.post_cell{
    display: table-cell;
    vertical-align: middle;
}

.post_body{
    width: 580px;
    opacity: 0.8;
}
.post_details{overflow:hidden}
.profile_img{
    border: solid 3px #ccc;
    width: 48px;
    height: 48px;
    margin: 0px 15px;
}

.post_info{
    color: #c3c3c3;
    font: normal 12px Arial, Helvetica, sans;
    margin-left: 8px;
}

a.no_style{
    color: inherit;
    text-decoration: inherit;
    font: inherit;
}
p {
    color: #525254;
    margin: 0px;
    padding: 0px;
    line-height: 18px;
    font: normal 15px Arial, Helvetica, sans;   
    word-wrap: break-word;
}