JSFiddle - React, Tailwind, and code Playground
by mubarakpasha
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marketing</title>
<link rel="stylesheet" type="text/css" href="css/style3.css">
<!-- <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> -->
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="scripts/lean-slider.js"></script>
<link rel="stylesheet" href="lean-slider.css" type="text/css" />
<link rel="stylesheet" href="sample-styles.css" type="text/css" />
</head>
<body>
<div class="header">
<div class="heading_Text">
<img src="images/IIS.png" width="200" height="130" alt="logo" style="margin-top: -30px; margin-left: -3px;" />
</div>
<div class="table2" style="margin-left: 600px; margin-top: -140px; height: 100px;">
<!-- <ul id="horizontal" >
<li align="center" class="active" style="padding-right: 0px;"><a href="index.html">Home</a></li>
<li style="padding-right: 0px;"><a href="about.html">About us</a>
-->
<!-- <ul>
<li> <a href="#">About company </a></li>
<li> <a href="#">Why IIS </a></li>
</ul>
-->
<!--
</li>
<li style="padding-right: 10px;"><a href="Services.html">Services</a></li>
<li style="padding-right: 10px;"><a href="Clients.html">Clients</a></li>
<li style="padding-right: 10px;"><a href="contact.html">Contact us</a></li>
</ul>
-->
<ul id="coolMenu">
<li><a href="index.html">Home</a></li>
<li>
<a href="#" style="padding-bottom: 10px;">About us</a>
<ul>
<li> <a href="#" style="padding-bottom: 5px; padding-top: 5px;">About company </a></li>
<li> <a href="#" style="padding-bottom: 5px;">Why IIS </a></li>
</ul>
</li>
<li...CSS
* {
margin: 0;
padding: 0;
}
/* */
.table2 ul li a:hover{
color:white;
background-image:url("../images/drop.png");
background-size:80px 79px;
background-repeat:no-repeat;
}
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
width: 80px;
padding: 20px 10px 40px 10px;
font-size: 16px;
font-family:Candara;
font-weight: regular;
color:white;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 140px;
padding: 10px 0px 0px 10px;
}
#coolMenu li:hover ul {
display: block;
}
#coolMenu li ul li a:hover {
background:#a72edc;
}
/* */
.header {
width:auto;
height:180px;
background:#660099;
}
.heading_Text
{
margin-top: -30px;
margin-left: 200px;
margin-top: 0px;
padding-top: 40px;
font-size: 16px;
font-family: Copperplate Gothic Bold;
font-weight: normal;
}
/* .table2 ul li a{
width: 30px;
padding: 20px 30px 40px 10px;
font-size: 16px;
font-family:Candara;
font-weight: regular;
color:white;
text-decoration: none;
} */
/* ul#horizontal li {
display: inline;
} */
.header_two
{
width:auto;
height:170px;
background:#2B2E35;
}
.left
{
width: 1200px;
padding-left: 0px;
margin-left: 185px;
font-family:calibri;
height:auto;
float: left;
/* background:red; */
}
.right
{
width:500px;
height:auto;
float: right;
/* background:green; */
}
.read1
{
width: 80px;
padding-top: 20px;
padding-left: 4px;
}
.read1 a:link {
background:red;
color: #ffffff;
text-decoration: none;
}
.read1 a:hover {
color:#ffffff;
background:black;
}
.read1 a:visited {
color: #ffffff;
}
.
.read2
{
width: 80px;
padding-top: 20px;
padding-left: 4px;
}
.read2 a:link {
background:black;
color: #ffffff;
text-decoration: none;
}
.read2 a:hover {
...