JSFiddle - React, Tailwind, and code Playground
by Joseph Perez
HTML
<head>
<script></script>
<style>
body{
background-color: ;
}
div{
background-color: #888888;
}
#content{
width: 1000px;
height: 450px;
overflow-y: scroll;
overflow-x: hidden;
}
li{
font-size: 14px;
list-style-type: none;
//line-height: 150%;
margin-bottom: 10px;
cursor: pointer;
width: auto;
max-width: 55%;
}
li:hover, #topic, h1{
color: #84502d;
}
#topic{
font-sze: 110%;
text-transform: uppercase;
}
#column{
width: 33%;
float: left;
}
img{
margin: auto;
width: 100%;
margin-left: 10%;
margin-top: 40px;
}
</style>
</head>
<body>
<div id="content">
<ul><li><h1>Environmental Health</h1></li></ul>
<hr style="width: 100%"></hr>
<div id="column" style="width: 20%">
<img src="http://www.mtyhd.org/wp-content/uploads/2016/07/Around-Ventana-042.jpg">
</div>
<div id="column">
<ul>
<li id="topic"><a>General</a></li>
<li><a>Applications, Permits, Forms</a></li>
<li><a>CDC's Drought Guidance</a></li>
<li><a>Consumer's Health Protection FAQ</a></li>
<li><a>Environmental Health Concern Form</a></li>
<li><a>Environmental Health Laboratory</a></li>
<li><a>Fees</a></li>
<li><a>Food Recall Webinar and Tool Kit</a></li>
<li><a>Power Outages Guidelines for Food Safety at Retail Establishments Duiring Temporary Power Outages</a></li>
<li><a>Prop 65 Reports</a></li>
<li><a>Public Beaches: Beach Water Qulity</a></li>
<li><a>Public Records Request</a></li>
<li><a>Recovering After a Wildfire</a></li>
<li><a>Request for File Review</a></li>
<li><a>Recycling Resources and Recovery Services</a></li>
<li><a>Restaurant Inspections</a></li>
<li id="topic"><a>Hazardous Material Management</a></li>
<li><a>CERS (Californa Electronic Reporting System)</a></li>
<li><a>Monitoring Wells and Soil Boring</a></li>
<li><a>Site Mitigation</a></li>
<li><a>Underground Storage...