JSFiddle - React, Tailwind, and code Playground

HTML

<div id="genelcerceve">
   <div class="sol">
      <div class="menu1">
      <h1 class="yurt">Yurtdışı Dil Okulları</h1>
		      <li><a href="#">- Kişisel Dil Okulu</a></li>
		      <li><a href="#">- Herşey Dahil Paket Programı</a></li>
		      <li><a href="#">- Hazırlık Sınıfı Paket Programı</a></li>
	  </div>
	 <div class="menu2">	 
     <h1 class="yaz">Yaz Kampları <img src="http://i.hizliresim.com/KrNnQP.png" /></h1>
		      <li><a href="#">-Kurumlara Özel Yaz Kampları</a></li>
	 </div> 
	 <div class="menu3">		  
     <h1 class="lise">Lise - Lisans - Yüksek Lisans</h1>
		      <li><a href="#">- Lise Programları</a></li>
		      <li><a href="#">- Lisans Programları</a></li>
		      <li><a href="#">- Yüksek Lisans Programları</a></li>
		      <li><a href="#">- 2 Yılda Lisans Programı</a></li>
	 </div>		  
   </div>
   
   <div class="orta">
      <h1 class="diger">Diğer Hizmetler</h1>
		      <li><a href="#">- Work & Travel</a></li>
		      <li><a href="#">- Work & Study</a></li>
		      <li><a href="#">- Staj Programları</a></li>
		      <li><a href="#">- Sertifika Programları</a></li>
		<ul class="daire">
		      <img src="http://i.hizliresim.com/KZzm6o.png" />
		</ul>	       
   </div>
   
   <div class="sag">
       <h1 class="vize">Vize Danışmanlığı</h1>
		      <li><a href="#">Ankara Anlaşması Vizesi -</a></li>
		      <li><a href="#">İngiltere Vizesi -</a></li>
		      <li><a href="#">Amerika Vizesi -</a></li>
		      <li><a href="#">Almanya Vizesi -</a></li>
		      <li><a href="#">Avustralya Vizesi -</a></li>
		      <li><a href="#">İspanya Vizesi -</a></li>
		      <li><a href="#">İtalya Vizesi -</a></li>
		      <li><a href="#">Kanada Vizesi -</a></li>
		      <li><a href="#">Malta Vizesi -</a></li>
		      <li><a href="#">Rusya Vizesi -</a></li>
   </div>
   
   <div class="alt">
		      <li><a href="#">- İngiltere</a></li>
		      <li><a href="#">- Almanya</a></li>
		      <li><a href="#">- Amerika</a></li>
		      <li><a href="#">-...

CSS

* {
  margin:0;
  padding:0;
}
.sol li, .orta li, .sag li  {
  list-style:none;
  margin-top:5%;
  border-bottom: 1px dotted  #666666;
  font: bold 14px Arial, Sans-Serif;
}
li a{
  color:#333333;
  text-decoration:none;
  font: bold 12px Arial, Sans-Serif;
  width:100%;
  height:100%;
}
#genelcerceve {
  width:720px;
  height:465;
  background-color:#CCCCCC;
  margin: 10px auto;
  display:block;
  position:relative;
}
h1 {
 font: bold 14px Arial, Sans-Serif;
 text-transform:uppercase;
 margin:1%;
 padding:5%;
}
h1.yurt {
 color:#1d7d9f;
 border-bottom: 1px solid #1d7d9f;
 padding-top:31px;
}
h1.yaz {
 color:#90c144;
 border-bottom: 1px solid #90c144;
 padding-top:31px; 
}
h1.yaz img{
 width:30px;
 height:30px;
}

h1.lise {
 color:#ff8c1a;
 border-bottom: 1px solid #ff8c1a;
 width:120%;
 padding-top:31px;
}
h1.diger {
 color:#ff4301;
 border-bottom: 1px solid #ff4301;
 padding-top:31px; 
}
h1.vize {
 color:#fa6086;
 border-bottom: 1px solid #fa6086;
 padding-top:31px;
}
.sol {
  width:27%;
  height:auto;
  display:block;
  float:left;
}
.orta {
  width:25%;
  height:auto;
  display:block;
  float:left;
  margin-left:13%;
  margin-top:20px;
}
.orta a:hover{
  color:#ff4301;
}
.sag {
  width:25%;
  height:auto;
  display:block;
  float:right;
  margin-top:50px;
  text-align:right;  
}
.sag a:hover {
  color:#fa6086;
}
.alt {
  width:80%;
  height:100px;
  display:block;
  float:right;
}
.alt li{
  height:auto;
  display:block;
  float:left;
  margin-left:1%;
  margin-top:3%;
}
.alt li a{
  border: 2px solid grey;
  padding: 5px 7px;
  border-radius:10px;
  font: bold 14px Arial, Sans-Serif;
  color:#999999;
}
.alt li a:hover{
  color:#30afd9;
}

.daire {
  width:240px;
  height:200;
  margin-top:10px;
  margin-left:40px;
  position:absolute;
  padding-top:15px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
    overflow:hidden;
    background-color:white;
    
}
.daire img{
  width:200px;
  height:200px;
}
.menu1 a:hover {
...