JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="button-demo">
<a href="#none" class="btn btn_default type2">목록</a>
<div class="btn_wrap">
  <a href="#none" class="btn btn_default type2">목록</a>
</div>
 
<!-- 2~3줄을 위해 별도 클래스를 생성 -->
<div class="btn_wrap multi2"><!-- 2줄 --></div>
<div class="btn_wrap multi3"><!-- 3줄 --></div>

<!-- flex를 사용하면 부모요소의 크기만큼 자식요소가 늘어남 -->
<div class="btn_wrap">
  <a href="#none" class="btn btn_default type2">취소</a>
  <a href="#none" class="btn btn_default type1">확인</a>
</div>

<div class="btn_wrap">
  <a href="#none" class="btn btn_default type2">다시 시도하기</a>
  <a href="#none" class="btn btn_default type1">메인화면으로<br>이동하기</a>
</div>

<div class="btn_wrap">
  <a href="#none" class="btn btn_default type2">다시 시도하기</a>
  <a href="#none" class="btn btn_default type1">메인화면으로<br>이동하기<br>시작</a>
</div>

<div class="btn_wrap type_justify">
  <a href="#none" class="btn nor type2">취소</a>
  <a href="#none" class="btn nor type1">확인</a>
</div>

<div class="btn_wrap type_center">
  <a href="#none" class="btn btn_default type2">취소</a>
  <a href="#none" class="btn btn_default type1">확인</a>
</div>


<div class="btn_wrap">
  <a href="#none" class="btn btn_default type1">확인</a>
</div>

  
</div>

CSS

.button-demo {
  margin:10px;
}

.btn.btn_default {
    border-radius: 2px;
    font-size: 14px;
    min-height: 24px;
}

.btn.type1 {
    background-color: #000;
    color: #fff;
}
.btn.type2 {
    background-color: #fff;
    color: #60584c;
    border: 1px solid #60584c;
}
.btn_wrap {
    margin: 20px 0;
    display: -webkit-box;
    display: flex;
    
    -webkit-box-align: stretch;
}
.btn {
    display:inline-block;
    padding: 15px;
    
}
.btn_wrap .btn {
    width:1px; /* android 4.3이하 버전에서는 필수(box-flex:1) */
    padding: 15px;
    text-align:center;
    display: -webkit-box;
    -webkit-box-flex:1;
    -webkit-box-pack: center; /* text horizontal */
    -webkit-box-align: center; /* text vertical */
    display: flex;
    flex: 1 1 auto;
    justify-content: center; /* text horizontal */
    align-items: center; /* text vertical */
}

.btn_wrap .btn:not(:first-child) {
  margin-left: 10px;
}
.btn_wrap.type_justify {
  -webkit-box-pack:justify;  
  justify-content:space-between;
}
.btn_wrap.type_center {
  -webkit-box-pack:center;
  justify-content:center;
}
.btn_wrap.type_justify .btn,
.btn_wrap.type_center .btn {
  min-width:70px;
  -webkit-box-flex:0;
  flex: 0 1 auto;
}  
.btn_wrap .btn.btn_default.type1:only-child {margin:0 24px;}