JSFiddle - React, Tailwind, and code Playground

Google Now Card

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//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">
<link rel="stylesheet" href="http://jenniferperrin.com/tasks/css/custom.css">
<link rel="stylesheet" href="http://jenniferperrin.com/tasks/css/layout.css">
<link rel="stylesheet" href="http://jenniferperrin.com/tasks/css/tasked.css">
<div class="content-col" id="page">
	<div class="inner-content">
		<h1 class="font-weight-thin no-margin-top">Dashboard</h1>
		<hr />
		
		<div class="card">
			<p class="card-title">Google Now Card</p>
			<p>Font is Open Sans. Title is 28px, whereas the body is 14px.</p>
			<p>Font color is #444, on a #fff card. The page color is #e1e1e1. I got these from samples I took from Google's "Now" page.</p>
			<div class="taskInfo">
				<div class="row">
					<div class="col-sm-10">
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
								<span class="sr-only">50% Complete</span>
							</div>
							<span class="progress-completed">50%</span>
						</div>
					</div>
					<div class="col-sm-2">
						<span class="task-actions">
							<a data-toggle="modal" href="#completeTask2" class="success"><i class="fa fa-check-square-o" data-toggle="tooltip" data-placement="top" title="Complete"></i></a>
							<a href="index.php?page=viewTask&taskId=2" class="info"><i class="fa fa-pencil" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
							<a data-toggle="modal" href="#deleteTask2" class="danger"><i class="fa fa-times-circle" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
						</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="card">
			<p class="card-title">Google Now...

CSS

@import url(http://fonts.googleapis.com/css?family=Muli:400, 700);
.card {
    background: #fff;
    position: relative;
    margin: 20px auto;
    padding: 15px;
    border:1px solid #dcdcdc;
    box-shadow:rgba(0, 0, 0, 0.0980392) 0 0 3px;
    font-family: Open Sans;
    color: #444;
    font-size: 14px;
}
.card:before {
    content:"";
    display: block;
    height: 5px;
    background: #cccccc;
    position: absolute;
    right: 2px;
    left: 2px;
    bottom: 100%;
}
.card p {
    margin: 0;
}
.card p.card-title {
    font-size: 28px;
}
.card p.card-title:after {
    font-family: FontAwesome;
    content:"\f0ae";
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 1;
    color: #eee;
    font-size: 30px;
}
.card .taskInfo {
    padding: 20px 0 0;
}

.card .taskInfo .progress {
    position: relative;
	height: 16px;
}
.card .taskInfo .progress-bar {
    background-color: #87b633;
    box-shadow: none;
}
.card .taskInfo .progress > .progress-completed {
	position: absolute;
	right: 0px;
	font-weight: 300;
    font-size: 10px;
	padding: 1px 5px 0 0;
}

.card .taskInfo { text-align: right; font-size: 16px; }
.card .taskInfo a { margin-right: 4px; }
.card .taskInfo:last-of-type { margin-right: 0; }
	.card .taskInfo a.primary { color: #236b9b; }
		.card .taskInfo a.primary:hover { color: #15405d; }
	.card .taskInfo a.info { color: #4da0d7; }
		.card .taskInfo a.info:hover { color: #287ab0; }
	.card .taskInfo a.success { color: #77c123; }
		.card .taskInfo p a.success:hover { color: #4f8017; }
	.card .taskInfo a.warning { color: #e5ad12; }
		.card .taskInfo a.warning:hover { color: #9e770c; }
	.card .taskInfo a.danger { color: #d64e18; }
		.card .taskInfo a.danger:hover { color: #913510; }
	.card .taskInfo a.tasked { color: #a0ce4e; }
		.card .taskInfo a.tasked:hover { color: #78a32d; }

/* ------------------- */
.progress {
    margin-bottom: 0;
}

JavaScript

$("[data-toggle='tooltip']").tooltip();