JSFiddle - React, Tailwind, and code Playground

by Avery Chan

HTML

<html>
<head>
<meta http-equiv:"Content-Type" content="text/html" charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" >
<title>2013 培训</title>
</head>
<body>
<div id="imageContainer">
  <div class="imageBox"><img class="largeImage" src="images/01.jpg"></div>
  <div class="imageBox"><img class="smallImage" src="images/02.jpg"></div>
  <div class="imageBox"><img class="smallImage" src="images/03.jpg"></div>
  <div class="imageBox"><img class="largeImage" src="images/04.jpg"></div>
</div>
<div id="pageHeader">The header of page that heads a pagers head</div>
<div id="description">This is a description of a description that describes a description of a descriptor that describes a description.</div>
<div id="studentList">The students that participated were:
<ul>
        <li>Joe</li>
        <li>Joey</li>
        <li>Josephine</li>
        <li>Joel</li>
        <li>Zhou</li>
        <li>Joseph</li>
        <li>Joelle</li>
        <li>Mike</li>
</ul>
</div>
</body>
</html>

CSS

@import url("http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css");

/*********************************************/
/*              General styling              */
/*********************************************/

html {
    font-size: 62.5%;
    /* Sets the default font size so that 1em = 10px */
    background-color: #04BFBF;
    background: linear-gradient(to bottom, rgba(4, 191, 191, 0), rgba(4, 191, 191, 1)), url(seagreen-cloud.png);
    background-size: 100% auto;
}

body {
    font-size: 2em;
    font-family: "Century Gothic", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", "宋体", STXihei, "华文细黑", sans-serif;
}

body > div {
    position: absolute;
    /* All div elements that are direct children of body, we position absolutely. */
}

/*********************************************/
/*                 Page Header               */
/*********************************************/

#pageHeader {
    top: 0px;
    /* Push the page header to the top. */
    width: 100%;
    margin-top: .25em;
    padding-top: .25em;
    padding-bottom: .25em;
    /* Creates a band across the top. */
    background-color: rgba(255,255,255,0.5);
    /* White */
    text-align: center;
    font-size: 2em;
}

/*********************************************/
/*                   Images                  */
/*********************************************/

#imageContainer {
    top: 5em;
    /* Positioned below pageHeader. */
    width: 100%;
}

.imageBox:nth-child(even) {
    transform: rotate(-3deg);
    /* Rotates the even pictures. */
}

.imageBox {
    border: 6px white solid;
    /* Creates picture border. */
    display: inline-block;
    /* Displays pictures in a row. */
    transform: rotate(3deg);
    /* Rotates the odd pictures. */
    margin-right: 1em;
    margin-left: 1em;
    /* Spacing between pictures. */
}

.imageBox img {
    width: 200px;
    /* Resizes the pictures. */
}

/*********************************************/
/*                  ...