JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="main-today-cont">
<div class="main-tabmenu-nav">
			<a href="#promotion" data-tab-idx="07" class="menu active">행사만 콕</a>
			<a href="#newProduct" data-tab-idx="02" class="menu">따끈따끈한 신상</a>
			<a href="#lateProduct" data-tab-idx="01" class="menu">최근 본 상품</a>
			<a href="#mClub" data-tab-idx="08" class="menu">우리아이M클럽</a>
			<a href="#coupon" data-tab-idx="10" class="menu">쿠폰을 콕</a>
			<a href="#delivery" data-tab-idx="05" class="menu">정기배송씨</a>
		</div>
</div>

CSS

a {
    text-decoration: none;
    color: #111;
}
.main-today-cont .main-tabmenu-nav {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 20px;
}
.main-today-cont .menu {
    display: table-cell;
    height: 43px;
    border: 1px solid #bbb;
    border-left: 0;
    font-size: 15px;
    color: #666;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.main-today-cont .menu:first-child {
    border-left: 1px solid #bbb;
}
.main-today-cont .menu.active, .main-today-cont .menu:hover {
    border-color: #46413b;
    color: #fff;
    background-color: #46413b;
}