JSFiddle - React, Tailwind, and code Playground

Tasked : Floating Task Boxes

by Jennifer Perrin

HTML

<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="tasks">
    
    <div class="task-item">
        <h1>Lorem ipsum</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        
        <div class="row mt-20">
            <div class="col-sm-8">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        <span class="sr-only">60% Complete</span>
                    </div>
                    <span class="progress-completed">60%</span>
                </div>
            </div>
            <div class="col-sm-4">
                <span class="task-actions">
                    <p>
                        <i class="fa fa-check-square-o"></i>
                        <i class="fa fa-pencil"></i>
                        <i class="fa fa-times-circle"></i>
                    </p>
                </span>
            </div>
        </div>
    </div>
    
    <div class="task-item">
        <h1>Dolor sit</h1>
        <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
        
        <div class="row mt-20">
            <div class="col-sm-8">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
                        <span class="sr-only">25% Complete</span>
                    </div>
                    <span...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);

* { border-radius: 0 !important; }
html {
    font: 16px 'Lato', sans-serif;
    color: #666;
}
body { background: #cccccc; }
a, a:hover { text-decoration: none; }
.mt-20 { margin-top: 20px !important; }

.tasks {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5em;
    -moz-column-count: 3;
    -moz-column-gap: 1.5em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.5em;
    column-count: 3;
    column-gap: 1.5em;
}

.task-item {
    display: inline-block;
    padding: 1.5em 1.5em 0;
    position: relative;
    background: #fff;
    margin-bottom: 1.5em;
    width: 100%;
    border: 1px solid #fafafa;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1);
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.task-item:before {
    content: "";
    display: block;
    height: 5px;
    background: #f0f0f0;
    position: absolute;
    right: 2px;
    left: 2px;
    bottom: 100%;
}
.task-item > h1 {
    margin: 0 0 10px;
    display: block;
    position: relative;
    z-index: 2;
    font-size: 24px;
}
.task-item > h1:after {
    font-family: FontAwesome;
    content: "\f0ae";
    position: absolute;
    right: 0;
    top: -10px;
    z-index: -1;
    color: #eee;
    font-size: 40px;
}

.task-item > p {
    display: block;
}

.progress {
    position: relative;
	height: 15px;
}
.progress > .progress-completed {
	position: absolute;
	right: 0px;
	font-weight: 300;
    font-size: 10px;
	padding: 0 5px 0 0;
}

.task-actions p { text-align: right; }
.task-actions i { margin-right: 4px; }
.task-actions i:last-of-type { margin-right: 0; }

/*-- RESPONSIVE ---*/
@media (min-width: 1200px) {
    .tasks {
        -moz-column-count: 4;
        -webkit-column-count4;
        column-count: 4;
    }
}

@media (max-width: 960px) {
    .tasks {
        -moz-column-count: 2;
       ...