JSFiddle - React, Tailwind, and code Playground

by cincodenada

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jessica Werner - Overview - [Page Name]</title>
    <link rel="stylesheet" href="project.css" type="text/css" />
</head>
<body>
    <div id="container">
    
<!--#include virtual="masthead.html" -->
        <div id="masthead">
    
      <h1>
    <img class="wrapMasthead"
    src="images/headshot.jpg" 
    alt="Jessica's headshot from her personal collection" 
    width="124px" height="160px"
    style="float: right"/> 
    Jessica Werner<br>
    iSchool Educational Portfolio
    </h1>
            <div style="clear:both"></div>
</div>
<!--End included content-->
        
<!--#include virtual="menu.html" -->
<div id="menu">
    <ul id="menulist">
        <li><a href="index.shtml">Home</a></li>
        <li><a href="courses.shtml">Courses Taken</a></li>
        <li><a href="intellectual.shtml">Intellectual Growth</a></li>
        <li><a href="training.shtml">Professional Training</a></li>
        <li><a href="tech.shtml">Technology Training</a></li>
        <li><a href="jessicawernerresume.pdf">R&eacute;sum&eacute;</a></li>
        <li><a href="mailto:[email protected]">Contact</a></li>
    </ul>
    <div style="clear:both;"></div>
</div>
<!--End included content-->  
<div id="content">
                  
<!-- Your Content goes here! -->    
            <p>&nbsp;</p> 
            <h2>This site is my iSchool educational portfolio.</h2>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend lacus in metus porttitor convallis. Sed vitae nulla mi, eget consectetur sapien. In hac habitasse platea dictumst. Vivamus sit amet augue eget orci dignissim ornare non vel turpis. Suspendisse eget arcu tortor, eu mollis diam. Morbi placerat...

CSS

@charset "utf-8";
/* CSS Document */
    img {border: solid #ffd240 medium;}
    h1, h2, h3 {
        text-align:center; 
        color: #00CC00;
    }
    body {
        font-family: Arial, Helvetica, sans-serif;
        background-color: #CD0074;
        color: #FFFF00;
    }
    .floatright {
        float: right;
        margin: 10px;
        margin-right:0px; 
        font-style:italic;
        font-size:90%;
    }
    a, a:active, a:link, a:visited {
        color: #85004b; 
        text-decoration: none;
        padding: 0px 2px;
    }
    a:hover {
        color: #85004b; 
        text-decoration: underline;
    }
    /* Horizontal Menu */

    #menu li {
        color: #E667AF
        display:inline; /* displays on same line */
        float:left; /*floats after previous*/
        padding-left: .5em /*sets gap between "buttons" */
    }
    #menu {
        /* width: 200px; /* if you change this width, change the one for #menu a */
        background: #0000FF;
        padding: 5px;
    }
    #menu a {
        width: 200px; /* if you change this width, change the one for #menu */
    }
    #menu a:hover {
        background-color: #FFFE73;
        color: #5E2580;
        }