JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <h4>width 를 지정하지 않은 상태</h4>
    <dl class="tabs">
        <dt><a href="#"><span>a</span></a></dt>
        <dd>
        <div class="tabs_content_each">
            abc
        </div>
        </dd>
        <dt><a href="#"><span>b</span></a></dt>
        <dd>
        <div class="tabs_content_each">
            def
        </div>
        </dd>
        <dt class="active"><a href="#"><span>c</span></a></dt>
        <dd class="active">
        <div class="tabs_content_each">
            ghi
        </div>
        </dd>
    </dl>
    <hr class="tabs_separator" />
    <h4>탭 3개 전체 width 맞추기</h4>
    <dl class="tabs tabs1">
        <dt class="active"><a href="#"><span>구글</span></a></dt>
        <dd class="active">
        <div class="tabs_content_each">
            <a href="http://google.com">http://google.com</a>
        </div>
        </dd>
        <dt><a href="#"><span>유튜브</span></a></dt>
        <dd>
        <div class="tabs_content_each">
            <a href="http://youtube.com">http://youtube.com</a>
        </div>
        </dd>
        <dt><a href="#"><span>html5 gallery</span></a></dt>
        <dd>
        <div class="tabs_content_each">
            <a href="http://html5gallery.com">http://html5gallery.com</a>
        </div>
        </dd>
    </dl>
    <hr class="tabs_separator" />
    <h4>탭 4개 전체 width 맞추기</h4>
    <dl class="tabs tabs2">
        <dt class="active"><a href="#"><span>구글</span></a></dt>
        <dd class="active">
        <div class="tabs_content_each">
            <a href="http://google.com">http://google.com</a>
        </div>
        </dd>
        <dt><a href="#"><span>유튜브</span></a></dt>
        <dd>
        <div class="tabs_content_each">
            <a href="http://youtube.com">http://youtube.com</a>
        </div>
        </dd>
        <dt><a href="#"><span>html5 gallery</span></a></dt>
        <dd>
        <div class="tabs_content_each">
            <a href="http://html5gallery.com">http://html5gallery.com</a>
    ...

CSS

* {
margin:0;
padding:0;
}

.container {
width:500px;
background-color:#efefef;
margin:2em auto;
padding:1em;
}

.tabs_separator {
border:1px solid olive;
border-bottom:0;
margin:1em 0;
}

.tabs {
background-color:olive;
width:100%;
height:5em;
position:relative;
}

.tabs dt {
background-color:#eee;
border:1px solid #d0d0d0;
border-bottom:0;
margin-left:-2px;
float:left;
height:2em;
position:relative;
z-index:2;
}

.tabs dt a {
border-bottom:1px solid #d0d0d0;
color:#999;
display:block;
height:100%;
text-align:center;
text-decoration:none;
}

.tabs dt:first-child {
margin-left:0;
margin-right:-2px;
}

.tabs dt a span {
display:block;
padding-top:.4em;
}

.tabs dd {
background-color:#d0d0d0;
clear:both;
display:none;
margin-top:1px;
position:absolute;
top:2em;
z-index:1;
}

.tabs dt.active a {
background-color:#fff;
border-bottom:1px solid #fff;
color:#333;
}

.tabs dd.active {
display:block;
}

.tabs .tabs_content_each {
background-color:#fff;
margin:1px;
padding:.4em 0;
}

.tabs1 dt {
width:33%;
}

.tabs1 dd {
width:99%;
}

.tabs2 dt {
width:25%;
}

.tabs4 dt:first-child {
margin-left:.5em;
}

.tabs5 dt {
width:10%;
margin-left:.8em;
}

.tabs5 dt:first-child {
margin-left:.8em;
margin-right:0;
}

.tabs6 dt:first-child {
margin-left:60%;
}

.tabs2 dd,.tabs3 dd,.tabs4 dd,.tabs5 dd,.tabs6 dd {
width:100%;
}

.tabs3 dt,.tabs4 dt,.tabs6 dt {
width:10%;
}

JavaScript

$(function() {
    var tabs_controller = $('.tabs');
    tabs_controller.each(function() {
        $(this).find('dt a').each(function(index) {
            $(this).bind('click', function(e) {
                var el = $(this);
                $(this).parent().parent().find('dd').each(function(index_in) {
                    el.parent().parent().find('dt').removeClass('active');
                    el.parent().addClass('active');
                    if (index_in == index) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
                e.preventDefault();
            });
        });
    });
});