JSFiddle - React, Tailwind, and code Playground

by alaingoldman

HTML

<body>
	<div id="wrapper">
		<div id="headerwrap">
			<div id="header" style="position:relative;">
				<h1 id="companylabel">title</h1>
			</div>
		</div>
		
		
		<div id="contentwrap">
			<div id="content">
				<div>
					<span style="text-align:center;">
						<h2>Application Title</h2>
					</span>
				</div>
				<br/>
				<br/>
				<div class="module">
					<a class="modlink" href=" ../csc/index.php">
						<img class="modimg" src="./images/csc.png" alt="csc"/>
						<br/>Client Support Center
					</a>
					<br/>
				</div>
				<div class="module">
					<a class="modlink" href=" ../icm/index.php">
						<img class="modimg" src="./images/icm.png" alt="icm"/>
						<br/>Inventory Control Management
					</a>
					<br/>
				</div>                
			</div>
		</div>
		<div id="rightcolumnwrap">
			<div id="rightcolumn" style="padding-left:10px;">
				<h3>User Options</h3>
			</div>
		</div>
				
			 
		
		<div id="footerwrap">
			<div id="footer">
				<p>&copy; CR footer</p>
			</div>
		</div>
	</div>
</body>

CSS

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#E1E6FA;
    background-color:#183152;
}

p {
    padding: 10px;
}

h1 { 
    font-size: 2em; 
}
h2 { 
    font-size: 1.5em; 
}
h3 {
    margin-bttom:2px;
}

#wrapper {
    margin: 0 auto;
    width: 1000px;
}

#headerwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
}

#header {
    height: 100px;
    background: #375D81;
    border-radius: 10px;
    border: 1px solid #C4D7ED;
    margin: 5px;
}

#contentwrap {
    width: 820px;
    float: left;
    margin: 0 auto;
}

#content {
    background: #ABC8E2;
    border-radius: 10px;
    border: 1px solid #C4D7ED;
    margin: 5px;
    color:black;
    overflow:auto;
}

#rightcolumnwrap {
    width: 180px;
    float: left;
    margin: 0 auto;
    color:black;
}

#rightcolumn {
    background: #ABC8E2;
    border-radius: 10px;
    border: 1px solid #C4D7ED;
    margin: 5px;
}

#footerwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
    clear: both;
}

#footer {
    height: 50px;
    background: #375D81;
    border-radius: 10px;
    border: 1px solid #C4D7ED;
    margin: 5px;
}

#companylabel {
    margin: 10px;
    top:50%;
    position:absolute;
    margin-top:-.5em;
}

#loginbox
{
    width:100%;
    
}

#loginboxbot
{
    width:100%;
    
}

.ra
{
    text-align:right;
}

#borderresults {
    color:orangered;
    font-weight:bold;
    padding:0px;
    margin:0px;
    border-radius:10px;
}

#alert {
    background-color:yellow;
}

.module {
    text-align:center;
    width:120px;
    padding:5px;
    border-radius:5px;
    border: 1px solid #E1E6FA;
    color:#E1E6FA;
    background-color:#375D81;
    float:left;
}

.modimg {
    height:100px;
    width:100px;
}

.modlink {
    color:#E1E6FA;
    text-decoration:none;
}