JSFiddle - React, Tailwind, and code Playground

by Soya Natsuki

HTML

<div class="conatiner">
  <div class="container-first">
    <div class="text-container">
      <div class="text-center">
        <h3>
          기업인터넷 하이링크
        </h3>
      </div>
      <p>1. 원격(재택) 서버 제공</p> 
      <p>2. CC인증 UTM(통합보안) 제공</p>
      <p>3. 백신 / 랜섬웨어 / 매체제어 30 User 제공</p>
      <p>4. 중국 / 베트남 / 동남아 해외망 개선</p>
      <p>5. 고정IP(공인IP) 제공</p>
    </div>
  </div>

  <div class="container-second">
    <div class="text-container">
      <div class="text-center">
        <h3>
          기업인터넷 하이링크
        </h3>
      </div>
      <p>1. 원격(재택) 서버 제공</p> 
      <p>2. CC인증 UTM(통합보안) 제공</p>
      <p>3. 백신 / 랜섬웨어 / 매체제어 30 User 제공</p>
      <p>4. 중국 / 베트남 / 동남아 해외망 개선</p>
      <p>5. 고정IP(공인IP) 제공</p>
    </div>

    <div class="text-container">
      <div class="text-center">
        <h3>
          기업인터넷 하이링크
        </h3>
      </div>
      <p>1. 원격(재택) 서버 제공</p> 
      <p>2. CC인증 UTM(통합보안) 제공</p>
      <p>3. 백신 / 랜섬웨어 / 매체제어 30 User 제공</p>
      <p>4. 중국 / 베트남 / 동남아 해외망 개선</p>
      <p>5. 고정IP(공인IP) 제공</p>
    </div>
  </div>
  
  <div class="container-bg">
    &nbsp;
  </div>
</div>

CSS

.conatiner-first, .container-second {
  width: 100%;
}

.container-first {
  margin-bottom: 20px;
}

.container-first .text-container {
  margin: 0 auto;
}

.container-second .text-container {
  display: inline-block;
}

.text-container {
  position: relative;
  z-index: 9;
  padding: 20px;
  margin: 10px;
  width: 40%;
  border: thick solid #07459b;
  background-color: #fff;
}

.text-container p {
  margin: 0;
}

.text-center {
  text-align: center;
}

.text-center h3 {
  margin: 5px 0;
}

.container-bg {
  position: absolute;
  top: 150px;
  left: 325px;
  width: 20%;
  height: 150px;
  border: thick solid #07459b;
  z-index: 0;
}