JSFiddle - React, Tailwind, and code Playground

by emredipi

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>CSS Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style2.css">
  </head>

  <body>
    <navbar>
      <ul>
        <li><a href="#home">HAKKIMIZDA</a></li>
        <li><a href="#news">FAALİYETLERİMİZ</a></li>
        <li class="dropdown">
          <a href="#project" class="dropbtn">PROJELERİMİZ</a>
          <div class="dropdown-content">
            <a href="#TANAP">TANAP</a>
            <a href="#BTC">BTC</a>
            <a href="#ITE">ITE</a>
          </div>
        </li>
      </ul>
    </navbar>
    <div class="baslik">
      CSS İLE LAYOUT HAZIRLAMA
    </div><br>
    <section>
      <div class="sol">
        <article>
          <div id="home">
            <h3>HAKKIMIZDA</h3>
            <hr class="solid">
            <div>
              Şirket Profili
              <p>Türkiye Cumhuriyeti ile Irak Cumhuriyeti Hükümetleri arasında 27 Ağustos 1973 tarihinde imzalanan Ham Petrol Boru Hattı Anlaşması çerçevesinde Irak ham petrolünün İskenderun Körfezi’ne taşınmasını gerçekleştirmek üzere, 7/7871 Sayılı Kararnameye istinaden 15 Ağustos 1974 tarihinde kurulmuştur. Başlangıçta sadece boru hatları ile petrol taşımacılığı yapan BOTAŞ, ülkemizin artan enerji ihtiyacının karşılanması amacıyla 1986 yılından itibaren doğal gazın ticareti ve taşımacılığı ile ilgili faaliyetlerine de başlamıştır.</p>

              <p>Bakanlar Kurulu'nun 8 Şubat 1995 tarih ve 96/6526 sayılı kararıyla 233 sayılı Kanun Hükmünde Kararname’ye tabi karlılık ve verimlilik ilkeleri doğrultusunda faaliyetlerini sürdüren bir Kamu İktisadi Teşebbüsü (KİT) olarak yapılandırılmıştır.</p>

              <p>Hali hazırda aşağıdaki faaliyetleri yürütmektedir.</p>

              <p>- Petrol ve Doğal Gaz Boru Hattı İşletmeciliği</p>
              <p>- LNG/FSRU Terminali İşletmeciliği</p>
              <p>- Liman Hizmetleri</p>
       ...

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
  background-color: #e2e2e2;
  font-size: 14px;
}

/* Style the header */
.baslik {
  margin-top: 20px;
  text-align: center;
  font-size: 45px;
  color: black;
}

.baslik::after {
  content: "";
  display: table;
  clear: both;
}

/* Menünün Dizayn Edilmesi*/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Menu butonlarında Mauseye Hover Atanması */
li a:hover,
.dropdown:hover .dropbtn {
  background-color: #EF5350;
}

/* Alt Menünün Dizayn Edilmesi*/
li.dropdown {
  display: inline-block;
}

/* Alt Menünün Dizayn Edilmesi*/
.dropdown-content {
  display: none;
  /* Alt menünün gizli tutulması*/
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  font-weight: bold;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Alt menü hover*/
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Menü üzerine gelince alt menünün açılması */
.dropdown:hover .dropdown-content {
  display: block;
}

article {
	border-top: 3px solid #333;
  float: left;
  padding: 20px;
  width: 100%;
  //background-image: linear-gradient(270deg, white, #FF7043);
  background-color: white;
  height: 100%;
}

/*Contentin 2ye bölünmesi*/
.sol {
  width: 74%;
  float: left;
}

.sag {
  margin-left: 9px;
  width: 23%;
  float: left;
}

#duyuru1,
#duyuru2 {
  //background-image: linear-gradient(90deg, white, #8D6E63);
  background-color: white;
  padding: 10px;
	border-top: 3px solid #333;
	margin-bottom:10px;
}

/*...