JSFiddle - React, Tailwind, and code Playground

by David Oh

HTML

<body>
  <div class="container">
    <header id="header">
      <div class="box">
        <div class="login-area"></div>
        <div class="wrap">
          <h1><a href="/index.html">
              <img src="http://i1.daumcdn.net/image.hope/etc//kakaocom/PC/common/kakopc_ci.png" alt="Kakao">
            </a></h1>
          <nav id="navi">
            <ul>
              <li><a href="http://with.daumkakao.com" target="_blank">제휴안내</a></li>
              <li><a href="http://www.kakao.com/helps?locale=ko&service=8" target="_blank">고객센터</a></li>
            </ul>
          </nav>
          <aside class="aside">
            <section class="section-second">
              <div class="select-lang">
                <select name="lang" id="lang">
                  <option value="kor" selected>한국어(KO)</option>
                  <option value="en">영어(EN)</option>
                </select>
              </div>
            </section>
            <section class = "section-first">
              <div class="select-locale">
                <select name="locale" id="locale">
                  <option value="nothing" selected>지역선택</option>
                  <option value="japan">일본</option>
                </select>
              </div>
            </section>
          </aside>
        </div>
      </div>
    </header>
    <section id="middle">
      <section id="body">
        <section id="content" class="main-content">
          <section class="back-img">
            <div class="main-background">
              <div class="slide"></div>
              <div class="main-banner">
                <div class="login-box">
                  <form id="login-form" method="post">
                    <ul class="login-list">
                      <li>
                        <input id="userid" type="text" name="userid" placeholder="카카오계정(이메일)" >
                      </li>
                      <li>
                        <input id="userpwd" type="password" name="userpwd" placeholder="비밀번호">
 ...

CSS

body {
  margin: 0;
  padding: 0;
}
.container {
  margin: 0;
  padding: 0;

}

#header {
  width: 100%;
  display: block;
  position: fixed;
  z-index: 100;
  background-color: white;
  opacity: .95;
}

#header .box {
  position: relative;
  border-bottom: 2px solid #FFE00F;
}

#header .login-area {
  width: 800px;
  height: 20px;
  margin: 0 auto;

}

#header .wrap {
  width: 800px;
  margin: 0 auto;
  height: 52px;
  position: relative;
}

#header h1 {
  float: left;
  margin: 0 20px 0 16px;
}

#header #navi {
  float: left;
  margin: 13px 0 0 120px;
}

#header ul {
  overflow: hidden;
  list-style: none;
}

#header ul li {
  float: left;
  margin: 0 12px 0 0;
}

#header .aside{
  float: right;
  overflow:hidden;
  margin-top: 17px;
}

#header .section-first {
  margin: 0 5px 0 0;
  float: right;
}

#header .section-second{
  float: right;
}

#header .select-locale {
  position: relative;
}

#header .select-lang {
  position: relative;
}


#body {
  width: 800px;
  margin: 0 auto;
  padding: 74px 0 0 0;
}

#body .back-img {
  height: 420px;
}

#body .main-background {
  height: 420px;
  min-width: 800px;
  max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
}

#body .slide {
  width: 100%;
  height: 420px;
  background-image: url(http://img2.kakao.co.kr/assets/main/img_bg_04.jpg);
  background-size: cover;
  position: absolute;
}

#body .main-banner{
  width: 800px;
  height: 420px;
  margin: 0 auto;
  position: relative;
}

.login-box {
  position: absolute;
  width: 160px;
  top: 140px;
  right: 3px;
}

form, ul {
  margin:0;
  padding:0;
}

form>ul {
  list-style: none;
}

.block-box {
  overflow: hidden;
}

.block-content-top>a {
  float:left;
}

.block-box .block-content-top {
  position:relative;
  overflow: hidden;
  width: 760px;
  margin: 0 auto;
}

.block-box .block-content-bottom {
  overflow:hidden;
  position: relative;
  width: 760px;
  margin: 0 auto;
}

.block-box .block-content-bottom>a {
  float: left;
}

.bottom-border {
 ...