JSFiddle - React, Tailwind, and code Playground

by Travis

HTML

<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>

<div id="cms-desk" data-ng-controller="SiteController">
    <div id="filter"><label for="q">Filter:</label> <input type="text" id="q" name="q" data-ng-model="query" focus-on="focusMe" /></div>
    <div class="site" data-ng-repeat="site in sites | filter:query">
        <div class="site-info">
            <div class="site-name">Department of Underwater Basketweaving</div>
            <div class="site-url"><a href="http://{{site.Url}}" target="_blank">http://example.com</a></div>
            <div class="site-desc">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut neque consequuntur asperiores eos nihil aut atque temporibus ratione dicta ad quibusdam quaerat ab tenetur minima eius perferendis iure deleniti corporis.</p>
            </div>
        </div>
        <div class="site-links">
            <ul>
                <li><a href="http://{{site.Url}}/cmspages/login.aspx?key={{site.Key}}" target="_blank" class="site-edit">Edit</a></li>
                <li><a href="http://{{site.Url}}" target="_blank" class="site-view">View</a></li>
            </ul>
        </div>
        

    </div>
</div>

CSS

#cms-desk {font:300 16px "Raleway", "Helvetica Neue", Sans-Serif;}

.site {border:1px solid #eee; border-radius:3px; overflow:hidden;}
.site a {color:#333; text-decoration:none; border-bottom:1px solid #eee;}
.site-info {width:70%; padding:1em; float:left;}
.site-name {font-size:1.5em;}
.site-url {}
.site-desc {font-size:.8em;}
.site-links {padding:1em; background:#333; float:right;}
.site-links ul {list-style:none; margin:0; padding:0;}
.site-links li {padding:.5em;}
.site-links li a {color:#fff; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5); text-decoration:none; display:block;}
.site-edit {}
.site-view {}