JSFiddle - React, Tailwind, and code Playground

by nobosh

HTML

<div id="mainContent">

<table class="conversation-list" id="listView-container" style="">
    <thead>
        <tr>
            <th colspan="4">Active Conversations</th>
        </tr>
    </thead>
    <tbody>
        <tr class="conversation-item">
            <td class="lastAuthor">
                <span class="lastAuthor-block">
                    <img src="https://www.facebook.com/safe_image.php?w=90&h=90&url=http://www.google.com/intl/en_ALL/images/srpr/logo1w.png">
                </span>
            </td>
            <td class="wrapper">
                <div class="convTitle">
                    <a href="/">Title</a>
                </div>
                <div class="preview">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula...</div>
            </td>
            <td class="bookend">1 minute</td>
            <td class="flag-cell">
                <span class="flag"> </span>
            </td>
        </tr>
        <tr class="conversation-item">
            <td class="lastAuthor">
                <span class="lastAuthor-block">
                    <img src="https://www.facebook.com/safe_image.php?w=90&h=90&url=http://www.google.com/intl/en_ALL/images/srpr/logo1w.png">
                </span>
            </td>
            <td class="wrapper">
                <div class="convTitle">
                    <a href="/">Title</a>
                </div>
                <div class="preview">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar...

CSS

#mainContent {
    width:auto;
    padding-right:100px;
    background:#EFEFEF;
}
.conversation-list {
    padding-bottom:10px;
    cursor:pointer;
    width:100%;
}
.conversation-list th  {
    background:#EFEFEF;
    color: #222;
    font-weight:bold;
    text-align:left;
    height:20px;
    border-bottom: 1px solid #ECECEC;    
}
.conversation-list td {
    vertical-align: middle;
    cursor:pointer;
    border-bottom: 1px solid #ECECEC;
    padding:5px;
}
.conversation-list .flag-cell {
    text-align:center;
    width: 11px;
}
.conversation-list .wrapper {
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-list .wrapper .preview {
    color: #737373;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-list .lastAuthor {
    text-align:center;
    width:35px;
}
.conversation-list .lastAuthor .lastAuthor-block {
    height: 35px;
    overflow: hidden;
    position: relative;
    float: left;
}
.conversation-list .lastAuthor img {
    width:35px;
    height:35px;
}
.conversation-list .bookend {
    width:120px;
    min-width:120px;
    overflow:hidden;
    text-align:center;
    color:#CCC;
    font-size:13px;
    font-weight:bold;
}