JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>StarTrackr!</title>
  

</head>
<body>
  <div id="container">
    <div id="header">
      <h1>StarTrackr!</h1>
    </div>
    <div id="content">
      <h2>
        Welcome!
      </h2>
      <div id="navigation">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Buy Now!</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Gift Ideas</a></li>
        </ul>
      </div>
      <p id="intro">
        Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in!    
      </p>
      <p id="disclaimer">
        Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected.
      </p>

      <div id="news">
        <h2>Latest News</h2>
        <p>
          Which member of the seminal calypso/lectro band <em>C&amp;C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands?
          <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span>
        </p>
        <p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p>
      </div>
      <div>
        <h2 class="heading">Our Celebrities</h2>
        <p class="info">
          We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've...

CSS

#navigation{
    float: right;
    width: 150px;
}
#intro{
    width: 450px;
}

.zebra {
    background-color: #999;
    font-family: serif;
}

body {
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    color: #3E3E3E;
    background: #94C5EB url(../images/background-grad.png) repeat-x;
    font-size: 12px;
}

p {
    padding: 5px;
}

a {
    color: #3687AF;
}

#container{
    margin:0 auto;
    text-align: left;
    width: 650px;
}

#header{
    height: 60px;
    color: #172322;
    background: transparent url(../images/header-corners.png) no-repeat bottom left;
}

#header h1
{
    padding:0;
    margin:0;
}

#content{
    background-color: #fff;
    padding: 0 15px 10px 15px;

} 

#footer{
    background-color: #fff;
    padding:15px;
  clear: both;
}

h2 {
    border-bottom:2px solid #015287;
    color: #D15600;
    padding-top: 10px;
  margin-top: 0;
}

table {
    border-collapse:collapse;
    font-size:12px;
    margin:0 20px 20px 20px;
    border-top:2px solid #015287;
    width:480px;
}

th {
    border-bottom: 2px solid #015287;
    color: #D15600;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    padding: 3px 8px;
}

td {
    padding: 6px;
}

JavaScript

//jQuery practice 

/*
$(function(){
    $('#celebs tr:odd').css({
        'background-color':'#999',
        'fontSize':'8px'
    });
});  */

$(function() {
    $('#celebs tr:odd').addClass('zebra');
});