JSFiddle - React, Tailwind, and code Playground

by saiwong

HTML

<html>
<body>

<div class="challenge1">
    <div class="description">
        <h2>Challenge 1</h2>
        <p>Make the following HTML code match the following image using only CSS.</p>
        <img src="http://dl.dropbox.com/u/26385406/challenge1.png"  />
    </div>

    <div class="code">
        <div>I am first</div><div>I am in the middle</div><div>I am last</div>
    </div>
</div>
    
<hr>

<div class="challenge2">
    <div class="description">
        <h2>Challenge 2</h2>
        <p>Make the following HTML code match the following image using only CSS.</p>
        <img src="http://dl.dropbox.com/u/26385406/challenge2.png"  />
    </div>

    <div class="code">
        <div>I am first</div><div>I am in the middle</div><div>I am last</div>
        <div>I am first</div><div>I am in the middle</div><div>I am last</div>
    </div>
</div>
    
<hr>

<div class="challenge3">
    <div class="description">
        <h2>Challenge 3</h2>
        <p>Apply the following animations to the styling from Challege 2 using only CSS</p>
        <ul>
            <li>1. Animate the text color of the left align divs to red on mouse over.</li>
            <li>2. Animate the background color of the right align divs to blue on mouse over.</li>
            <li>3. Animate the center align divs to slide back and forth horizontally on mouse over.</li>
            <li>4. Halt animation of the center divs when mouse is clicked.</li>
        </ul>
        <img src="http://dl.dropbox.com/u/26385406/challenge3.png"  />
    </div>

    <div class="code">
        <div>I am first</div><div>I am in the middle</div><div>I am last</div>
        <div>I am first</div><div>I am in the middle</div><div>I am last</div>
    </div>
</div>

<hr>
    
<div class="challenge4">
    <div class="description">
        <h2>Challenge 4</h2>
        <p>Complete Challenge 3 using only Javascript.</p>
    </div>

    <div class="code">
        <div>I am first</div><div>I am in the middle</div><div>I am last</div>
   ...