JSFiddle - React, Tailwind, and code Playground

by rodneyhickman

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css">
<div class="productItemTemplate">
    <div id="rankCircle">
        <div id="rankCircleCircle" class="categoryLeaderRankCircle">
            <div>RANK
                <div id="rankValue">1</div>
            </div>
        </div>
    </div>
    <div class="productLabelsContainer">
        <div id="productName">athenahealth athenaCollection</div>
    </div>
    <div class="scoreContainer">
        <div class="scoreValue" >84.8</div>
    </div>
</div>
<div class="productItemTemplate">
    <div id="rankCircle">
        <div id="rankCircleCircle" class="categoryLeaderRankCircle">
            <div>RANK
                <div id="rankValue">2</div>
            </div>
        </div>
    </div>
    <div class="productLabelsContainer">
        <div id="productName">athenahealth athenaCollection</div>
    </div>
    <div class="scoreContainer">
        <div class="scoreValue" >84.8</div>
    </div>
</div>

CSS

.bestInKlasRankCircle {
    border-radius: 50%;
    behavior: url(PIE.htc);
    /* remove if you don't care about IE8 */
    font-family:'Arial', 'Helvetica', sans-serif;
    font-size: 10px;
    color: white;
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: #da7633;
    text-align:center;
    vertical-align:middle;
    margin: 5px;
    box-shadow: 2px 3px 3px 1px #717070;
}
.categoryLeaderRankCircle {
    border-radius: 50%;
    behavior: url(PIE.htc);
    /* remove if you don't care about IE8 */
    font-family:'Arial', 'Helvetica', sans-serif;
    font-size: 10px;
    color: white;
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: #004990;
    text-align:center;
    vertical-align:middle;
    margin: 5px;
    box-shadow: 2px 3px 3px 1px #717070;
}
#rankValue {
    font-family:'Arial', 'Helvetica', sans-serif;
    font-size: 18px;
    font-weight:bold;
}
#rankCircle {
    display:table-cell;
    vertical-align:middle;
}
.productItemTemplate {
    display:table;
    width:100%;
    text-align: left;
    padding: 5px;
    font-size: 20px;
    border: 1px solid #dadada;
    background: white;
    color: #000;
    box-shadow: 0 0 7px #dadada inset;
}
.productLabelsContainer {
    display:table-cell;
    padding: 5px;
}

.scoreContainer{
    vertical-align:middle;
    text-align:center;
}
.scoreValue{
    display:table-cell;
	background-color: #da7633;
	color: white;
	padding: 4px;
	font-family: 'Arial' , 'Helvetica' , sans-serif;
	font-size: 18px;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 2px 3px 3px 1px #717070;
}