JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<div style="border-bottom:solid #d9d9d9 1px;background:#f9f9f9;"><div class="container"><div class="row"><div class="span12"><div style="padding:15px;padding-right:0px;padding-left:0px;"><div id="coursera-banner-newcourses" style="font-size:16px;" class="alert alert-info coursera-banner-alert">We just launched 72 new courses! <a class="coursera-catalog-promo">Click here to see them.</a></div><h1>Course Explorer</h1></div></div></div></div></div>

CSS

.container {
width: 940px;
margin-left: auto;
margin-right: auto;
}

.row {
margin-left: -20px;
}

.span12, .container {
width: 940px;
}

.coursera-banner-alert {
float: right;
margin-bottom: 0;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
font-family: "sofiapro",Arial,sans-serif;
}

.alert-info, .alert-info .alert-heading {
color: #222;
}
.alert-info {
background-color: #D9EDF7;
border-color: #BEE9F1;
}
.alert, .alert-heading {
color: #222;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 22px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #FCF8E3;
border: 1px solid #FBEFD6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}


h1 {
font-size: 30px;
line-height: 30.799999999999997px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: "sofiapro-medium",Arial,sans-serif;
color: #333;
text-rendering: optimizelegibility;
font-weight: normal;
}