JSFiddle - React, Tailwind, and code Playground

by simucal

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<div id="container">
    <div id="header">
        <div class="logo">
            <img height="65" src="http://bytecourse.com/Content/img/logo.png" />
        </div>
    </div>
    <div id="content">
        <div id="featured">
            Featured Course
        </div>
        <div id="courses">
            <div class="course first">
                <div class="course-inner">
                 <h3 class="title">SQL Server Course</h3>
                    <div class="icon"></div>
                    <div class="by">By <span class="author">Matthew McDole</span></div>  
                    <button style="margin: 15px 0 0 15px;">Buy Now</button>               
                </div>
            </div>
            <div class="course">
                <div class="course-inner"></div>
            </div>
            <div class="course">
                <div class="course-inner"></div>
            </div>
            <div class="course last">
                <div class="course-inner"></div>
            </div>
        </div>     
    </div>
</div>
<div id="footer-container">
    <div id="footer">
        <div id="footer-top">
        
        </div>
        <div id="footer-bottom">
            <ul>
                <li class="first">© 2011 bytecourse, Inc.</li>
                <li><a href="/">Contact</a></li>
                <li><a href="/">Terms of Use</a></li>
                <li class="last"><a href="/">Privacy Policy</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

body {
    font-size: 12px;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    height: 100%;
}

a {
    color: #f7931e;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    cursor: pointer;
    display: block;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 0;
    background-color: #55A4F2;
    color: white;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

button:hover {
     background-color: #1071D1;
}

#container {
    width: 960px;
    margin: 0 auto;
}

#header {
    margin: 0 0 50px 0;
}

#header .logo {
    margin-top: 5px;
}

#content #featured {
    background: #EDEDED;
    padding: 10px;
    margin-bottom: 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 250px;
}

#content #courses {  
   background: #EDEDED;
    padding: 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
}

#content #courses .course {
    float: left;
    border-left: 1px dotted #CBCBCB;
    margin: 0 0 15px 0;
    padding: 0 15px;
}

#content #courses .first {
    border-left: 0;
    margin-right: 0;
}

#content #courses .last{
    margin-right: 0;
}

#content #courses .course .course-inner {
    background-color: white;
    height: 250px;
    margin: 0;
    padding: 15px;
    width: 170px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 2px #CBCBCB;
    -webkit-box-shadow: 0 1px 2px #CBCBCB;
    box-shadow: 0 1px 2px #CBCBCB;
    float: left;
}

#content #courses .course .title {
    font-size: 18px;
    color: #F36C21;
}

#content #courses .course .icon {
    background: #EDEDED;
    width: 155px;
    height: 155px;
    margin-top: 10px;
}

#content #courses .course .by {
    font-size: 12px;
    color: #999;
    margin-top: 7px;
...