JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="menu">
    <li><a href="#">company of company</a></li>
    <li><a href="#">introduction the music infomation</a></li>
    <li><a href="#" class="on">product</a></li>
    <li><a href="#">faq</a></li>
</ul>


<ul class="menu02">
    <li><a href="#">company of company</a></li>
    <li><a href="#">introduction the music infomation</a></li>
    <li><a href="#" class="on">product</a></li>
    <li><a href="#">faq</a></li>
</ul>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');

a, a:hover, a:focus {
  font-family: arial, vernada, sans-serif;
  text-decoration: none;
}

.menu    {
  background: #7f8c8d;
  border-bottom: 3px solid #34495e;margin-bottom: 20px;
	height: 60px; /* 옵션 : 고정된 높이가 있을 경우 지정함 */
  display: flex;
}
.menu li    {
  display: flex;
  flex: 1; /* 1 1 0% 단축속성 */
}
.menu li a  {
  font:bold 14px 'Montserrat', arial, vernada, sans-serif;
  text-transform: capitalize;
  color:#ffffff;
  box-shadow:inset 0 0 0 1px rgba(52,73,94, .5); 
  padding:10px;
	text-align: center;
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
}
.menu li a:hover, .menu li a.on {
  background: #34495e;
}

.menu02    {
  border-bottom: 3px solid #34495e;
  margin-bottom: 20px;
	height: 60px; /* 옵션 : 고정된 높이가 있을 경우 지정함 */
  display: flex;
}
.menu02 li    {
  background: #7f8c8d;
  margin-left:10px;
  display: flex;
  flex: 1;
}
.menu02 li:first-child    {
  margin-left:0;
}
.menu02 li a  {
  font:bold 14px 'Montserrat', arial, vernada, sans-serif;
  text-transform: capitalize;
  color:#ffffff;
  padding:10px;
	text-align: center;
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
}
.menu02 li a:hover, .menu02 li a.on {
  background: #34495e;
}