JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="faq-container">
  <li>
    <p class="question">
       말티톨은 어떻게 단 맛이 나나요?
    </p>
    <div class="answer-group">
      <p class="answer-item">
        말티톨은 올리고당에 알코올을 결합하여 만드는 당알콜로,<br>
        설탕 대신 쓰이는 대체 감미료 중 하나입니다.<br>
        설탕의 60~70% 정도 당도를 가지고 있고 대체 감미료 중에서도 가장<br>
        자연스러운 단맛을 내 과자, 빵, 초콜릿 등의 식품과 잘 어울립니다.
      </p>
    </div>
    
  </li>
  <li>
    <p class="question">
       말티톨이 왜 설탕보다 좋은가요?
    </p>
    <div class="answer-group">
      <p class="answer-item">
        말티톨은 GI지수가 36으로, 설탕의 57% 수준입니다.<br>
설탕을 먹었을 때 혈당이 상승하는 속도보다,<br>
말티톨을 먹었을 때 혈당 상승 속도가 절반 수준이라는 의미입니다.
      </p>
      <p class="answer-item">
        이러한 GI지수는 두부(42), 현미(56), 바나나(55) 등보다도 낮은 수치로,<br>
적절한 양을 섭취한다면 건강에 긍정적인 방향으로 작용할 수 있습니다.
      </p>
      <p class="answer-item">
다만 개인에 따라 과량 섭취시 설사를 일으킬 수 있으니,<br>
섭취에 유의하시기 바랍니다.
      </p>
    </div>
    
  </li>
</ul>

SCSS

body {
  line-height: 1.5;
  background: #EEE;
}
.faq-container {
  margin: 20px;
  font-size: 14px;
  font-family: sans-serif;
  li {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
  }
  .question {
    position: relative;
    align-self: flex-start;
    padding: 20px;
    margin-bottom: 20px;
    margin-left: 70px;
    border-radius: 10px;
    background: #FFF;
    &::before {
      content: 'Q';
      display: inline-flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: -70px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      font-weight: bold;
      font-size: 24px;
      color: #FFF;
      background: #000000;
    }
  }
  .answer-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 70px;
  }
  .answer-item {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: yellow;
    &:last-child {
      position: relative;
      &::before,
      &::after {
        position: absolute;
        bottom: 0;
      }
      &::before {
        content: '';
        right: -15px;
        width: 0;
        height: 0;
        border: 15px solid transparent;
        border-bottom-color: yellow;
      }
      &::after {
        content: 'A';
        display: inline-flex;
        justify-content: center;
        align-items: center;
        right: -70px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        font-weight: bold;
        font-size: 24px;
        color: #FFF;
        background: #FF6600;
      }
    }
  }
}