JSFiddle - React, Tailwind, and code Playground

by audetwebdesign

HTML

<div id="container" align="center">
    <div id="container2">
        <div id="wrapper">
            <div id="header">
                <img src="http://placehold.it/200x100" />
            </div>
            <div id="content">
                <div id="menubar">
                    <ul id="mcolor">
                        <li><a href="tdesign.html"><font color="#000000"> Home </</a></li>
                        <li class="active"><a href=""><font color="#000000">About Us</font></a></li>
                        <li><a href="gallery.html"><font color="#000000">Gallery</font></a></li>
                        <li><a href="contactus.html"><font color="#000000">Contact Us</font></a></li>
                    </ul>
                </div>
            </div>
            <div id="contentbody">
                <div id="contentbodytext">
                    <div id="divaboutusintroductionparagraph">&nbsp;&nbsp;INTRODUCTION PARAGRAPH INTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION PARAGRAPH</div>
                    <div id="imageholder">
                        <img src="http://placehold.it/230x120" width="230" height="120" />
                        <div id="divfloatright">
                            <p>You rarely hear any entrepreneurs who succeeded in a snap. dddddddddddddddddddddddddddddddddd</div>
                    </div>
                </div>
            </div><!--closing tag for wrapper -->
        </div><!--closing tag for container2 -->
    </div><!--closing tag for container -->
</div>

CSS

@charset"utf-8";

/* CSS Document */
 body {
    margin:0px;
    padding:0px;
}
#container {
    padding:30px;
    min-width:1024px;
    min-height:768px;
    background:#d8e0eb;
    border:0px;
    margin:0px;
}
#container2 {
    width:1000px;
    height:730px;
    background-color:#FFF;
    padding-top:25px;
    padding-bottom:15px;
}
#wrapper {
    min-width:800;
    min-height:600px;
}
#header {
    width:900px;
    height:120px;
    background-color:violet;
}
#menubar {
    background-color:#FFF;
    width:452px;
    height:30px;
    padding-top:5px;
    padding-bottom:5px;
    text-decoration: none;
    float:;
}
#content {
    width:1000px;
    height:80px;
    background-color:#f6f6f6;
}
#contentblock1 {
    width:auto;
    height:auto;
    padding-top:50px;
    text-align:justify;
}
#contentbody {
    width:1000px;
    height:420px;
    padding-top:50px;
    margin-left:0;
    margin-right:0;
    background-color:#f6f6f6;
}
#contentbodytext {
    margin-left:50px;
    text-align:left;
}
ul {
    list-style-type:none;
    padding:0;
    margin:0;
    display:inline;
}
li {
    list-style-type:none;
    background-color:#;
    border-right:1px solid #CCC;
    float:left;
    padding-left:30px;
    /*adjust space of menu text to each other*/
    padding-right:30px;
    padding-top:8px;
    padding-bottom:8px;
}
a:link {
    text-decoration:none;
}
/* unvisited link */
 a:visited {
    text-decoration:none;
}
/* visited link */
 li:hover {
    background-color:#ffd640;
}
ul#mcolor li:hover > a {
    background-color:#ffd640;
    <!-- sets all link color when hovering to yellow -->
}
ul#mcolor li.active a {
    color: rgb(25, 25, 25);
    background-color: #ffd640;
}
#mcolor li.active {
    background: none repeat scroll 0 0 #ffd640 !important;
}
/*FOLLOWS ARE MISCELLENEOUS LIKE  DIVS image holder etc. */
#divaboutusintroductionparagraph {
    text-align:justify;
    padding-left:50px;
    padding-right:50px;
}
#imageholder {
    border: 1px dotted red;
   ...