JSFiddle - React, Tailwind, and code Playground

by Cardiff

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet-theme-ios.css">
<div id="main-region">
    <div>
        <div id="header-region" class="bar bar-standard">
            <div>
                <nav>
                     <h1 class="title">All Contacts</h1>

                </nav>
            </div>
        </div>
        <div id="secondary-header-region" class="bar bar-header-secondary">
            <div>
                <input type="search" placeholder="Search">
            </div>
        </div>
        <div id="contacts-region" class="content">
            <ul class="table-view list">
                <li class="table-view-cell media"> <a class="navigate-right single-contact" href="#contacts/6">
		  <img class="media-object pull-left contact_pic circular" src="./assets/pics/user.jpg" width="80px;" height="80px;">
		  <div class="media-body">
			   Test User 1
			  <p>Title</p>

		  </div>
	 	</a>

                </li>
                <li class="table-view-cell media"> <a class="navigate-right single-contact" href="#contacts/5">
		  <img class="media-object pull-left contact_pic circular" src="./assets/pics/user.jpg" width="80px;" height="80px;">
		  <div class="media-body">
			   Test User 2
			  <p>Title</p>

		  </div>
	 	</a>

                </li>
            </ul>
        </div>
    </div>
</div>