JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tab_container">
<div id="test1-header" class="accordion_headings header_highlight" >Home<span class="arrow"></span></div>
<div id="test2-header" class="accordion_headings" >About<span class="arrow"></span></div>
<div id="test3-header" class="accordion_headings" >Work<span class="arrow"></span></div>
<div id="test4-header" class="accordion_headings" >Social<span class="arrow"></span></div>
<div id="test5-header" class="accordion_headings" >Contact<span class="arrow"></span></div>
</div>
CSS
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin:10px;
}
#main-content2{
border:1px solid #000;
padding:5px;
width:590px;
position:absolute;
left:50%;
top:40%;
margin-left:-325px;
z-index:1;
margin-top:-80px;
-moz-box-shadow: 5px 5px 5px #aeaeae;
-webkit-box-shadow: 5px 5px 5px #aeaeae;
box-shadow: 5px 5px 5px #aeaeae;
}
#main-content{
border:1px solid #000;
width:560px;
height:230px;
margin:10px auto;
}
.accordion_headings{
width:100%;
padding:5px;
background:#fff;
color:#000;
cursor:pointer;
font-weight:bold;
border-bottom:1px solid black;
}
/*
.accordion_headings:hover{
background:#00CCFF;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
}
*/
.accordion_headings{
position:relative;
}
.accordion_headings .arrow{
display:none;
}
.accordion_headings:hover .arrow{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
display:block;
position:absolute;
bottom:0;
left:49%;
}
.accordion_child{
padding:15px;
background:#fff;
}
.header_highlight{
background:#a0a0a0;
}
.tab_container *{
float:left;
width:100px;
}
</style>