JSFiddle - React, Tailwind, and code Playground

by ooflorent

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="inbox">
    <header data-role="header" data-position="fixed">
        <h1>Inbox (2)</h1>
    </header>
    <div data-role="content">
        <ul data-role="listview">
            <li class="unread"><a href="#mail">
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>13:37</strong></p>
            </a></li>
            <li class="unread"><a href="#mail">
                <h3 class="attachment">jQuery Team <span></span></h3>
                <p><strong>Boston Conference Planning</strong></p>
                <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
                <p class="ui-li-aside"><strong>11:58</strong></p>
            </a></li>
            <li><a href="#mail">
                <h3>Avery Walker</h3>
                <p><strong>Re: Dinner Tonight</strong></p>
                <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
                <p class="ui-li-aside"><strong>08:12</strong></p>
            </a></li>
            <li><a href="#mail">
                <h3>Amazon.com</h3>
                <p><strong>4-for-3 Books for Kids</strong></p>
                <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
                <p class="ui-li-aside"><strong>06/03/12</strong></p>
            </a></li>
            <li><a href="#mail">
                <h3>Mike Taylor <span></span></h3>
                <p><strong>Re: This weekend in...

CSS

.unread .ui-btn-inner a.ui-link-inherit {
    padding-left: 45px;
    background: url(http://goo.gl/362Jm) 15px center no-repeat;
}

h3 span {
    background: url(http://goo.gl/1GjGD) no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin: 0 0 -2px 6px;
}

p.ui-li-aside {
    color: #44b;
}

.mail .ui-btn-corner-all {
    margin-left: 6px;
    padding: 2px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail .body {
    margin-top: 25px;
    font-size: 90%;
}

.mail .body > *:last-child {
    margin-bottom: 0;
}