JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="container">
  <div id="header">
    <div id="innerheader" >
      <div id="logo"></div>
      <div id="slogan">
        <p class="ust">type<span class="turuncu">type</span></p>
        <p class="alt">type</p>
      </div>
      <div id="servis"></div>
      <div id="headeriletisim">
        <div class="telefon">type</div>
        <div class="numarasi">
          <div id="telefonicon"></div>
          type</div>
      </div>
    </div>
  </div>
  <div id="navbar">
    <div id="nav">
      <ul>
        <li><a href="iletisim.html">type</a></li>
        <li><a href="galeri.html">type</a></li>
        <li><a href="avantajlariniz.html">type</a></li>
        <li><a href="programlarimiz.html">type</a>
          <ul>
            <li><a href="ilkortaokul.html">type</a></li>
            <li><a href="lise.html">type</a></li>
            <li><a href="universite.html">type</a></li>
            <li><a href="yetiskin.html">type</a></li>
            <li><a href="yazdonemi.html">type</a></li>
          </ul>
        </li>
        <li><a href="akademik.html">type</a>
          <ul>
            <div id="ucgen"></div>
            <li><a href="kadromuz.html">type</a></li>
            <li><a href="ilkelerimiz.html">type</a></li>
            <li><a href="egitimsistemimiz.html">type</a></li>
            <li><a href="seviyeler.html">type</a></li>
          </ul>
        </li>
        <li><a href="index.html">type</a></li>
      </ul>
    </div>
  </div>
  <div id="slider"></div>
  <div id="adadil">
      <div id="deneme">
          
          <div id="deneme2"></div>
      </div>
  </div>
  <div id="footer">
    <div id="secondorangepiece"></div>
    <div id="orangepiece"></div>
    <div id="innerfooter">
      <div id="footersolblok">
        <div id="footerlogo"></div>
        <ul id="footerakademik">
          <li><a href="akademik.html"><span class="footertitle">type</span></a></li>
          <li><a href="kadromuz.html">type</a></li>
          <li><a...

CSS

@charset "UTF-8";
@charset "UTF-8";
@import url("../webfonts/fedra_sans_bold/stylesheet.css");
@import url("../webfonts/fedra_sans_bold_italic/stylesheet.css");
@import url("../webfonts/fedra_sans_normal/stylesheet.css");
@import url("../webfonts/fedra_sans_medium/stylesheet.css");
@import url("../webfonts/fedra_sans_std_book/stylesheet.css");
@import url("../webfonts/fedra_sans_std_medium_italic/stylesheet.css");
@import url("../webfonts/fedra_sans_medium_italic/stylesheet.css");
* {
	margin: 0;
	padding: 0;
}
html, body {
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	height: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
}
#container {
	min-height: 100%;
	position: relative;
	z-index: 99;
}
#header {
	width: 100%;
	height: 120px;
	margin-left: 0px;
	margin-right: 0px;
	background-color: #000066;
}
#navbar {
	width: 100%;
	height: 30px;
	margin-left: 0px;
	margin-right: 0px;
	background-color: #FF6600;
}
#innerheader {
	width: 960px;
	height: 120px;
	margin-left: auto;
	margin-right: auto;
}
#nav {
	width: 960px;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
}
#logo {
	width: 150px;
	height: 120px;
	background-image: url(../img/adadil%20alterno%20logo.png);
	background-position: center center;
	background-repeat: no-repeat;
	float: left;
	background-size: 150px auto;
}
#slogan {
	width: 350px;
	float: left;
	height: 110px;
	margin-left: 40px;
}
#adadil {
	width: 100%;
	height: auto;
	margin-left: 0px;
	margin-right: 0px;
	padding-bottom: 250px;
}
#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 250px;
	background-color: #000066;
	margin-left: 0px;
	margin-right: 0px;
}
#innerfooter {
	width: 960px;
	height: 250px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.ust {
	font-family: "fedra sans medium italic";
	color: #FFFFFF;
	font-size: 14pt;
	width: 350px;
	height: 60px;
	text-align: left;
	float: left;
	line-height: 90px;
	text-shadow: 1px 1px...