JSFiddle - React, Tailwind, and code Playground

by jjordanca

HTML

<title>Topic 3 Review</title>
    <body>
    <div id="content">
        <video controls="controls">
            <source src="video/video.ogg" type="video/ogg" />
            <source src="video/video.mp4" type="video/mp4" />
            <source src="video/video.webm" type="video/webm" />
            <a href="http://www.google.com/chrome/" title="Get Chrome!"><img src="images/update.jpg" alt="UPDATE YOUR BROWSER" /></a>
        </video>
        <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Type</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Mrs Abacha</td>
                <td>[email protected]</td>
                <td>Investment</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Joy Zaya</td>
                <td>[email protected]</td>
                <td>Love Scam</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Sir Mugu</td>
                <td>[email protected]</td>
                <td>Nigerian Prince</td>
            </tr>
        </table>
        <h3>How to tell you're dealing with a scammer:</h3>
<ul>
<li>They ask for money.</li>
<li>They offer money.</li>
<li>They talk about money.</li>
</ul>
<p class="italics">
It's always fun to lead on a scammer, it wastes their time, giving them less time to scam others
</p>
<h5>Generally a scam ends like this:</h5>
<p class="background">
The above information are to enable us put up letters of claim and job description to the respective ministries for the issuance of the mandatory fund release approval/recommendations. This way, your company will become recognised and accepted as the beneficiary of the contract entitlements before the final remittance to your nominated account by the Central Bank of Nigeria being the paying bank.

We are looking forward to doing this business with you and solicit your absolute...

CSS

@import url(http://fonts.googleapis.com/css?family=Economica:400,700,400italic,700italic);
body {
    background-color: #000000;
    margin: 0px;
    padding: 0px;
    font-family: "Economica";
    }
#content {
    background-color: #444444;
    width: 100%;
    max-width: 500px;
    margin: auto auto;
    color: #ffffff;
    }
video {
    width: 100%;
    }
table, th, td  {
    border: 1px solid #ffffff;
    width: 100%;
    font-size: 90%;
    }
th, td {
    width: 25%;
    text-align: center;
    vertical-align: middle;
    }
h3 {
    margin-left: 10%;
    }
h5 {
    width: 90%;
    margin: auto auto;
    }
p {
    width: 90%;
    margin: auto auto;
    margin-bottom: 10px;
    }
p.italics {
    font-style: italic;
    text-align: center;
    font-size: 95%;
    }
p.background{
    color: #000;
    background-color: #fff;
    border: #555;
    }
img {
    width: 100%;
    border: 0;
    }