JSFiddle - React, Tailwind, and code Playground

by seano666

HTML

<div class="wrap">
    <div class="expando seven">
        <div class="title">Skills</div>
    </div>
    <div class="expando six">
        <div class="title">Experience</div>
    </div>
    <div class="expando five">
        <div class="title">Education</div>
    </div>
    <div class="expando four">
        <div class="title">Reliability</div>
    </div>
    <div class="expando three">
        <div class="title">Flexibility</div>
    </div>
    <div class="expando two">
        <div class="title">Motivation</div>
    </div>
    <div class="expando one">
        <div class="title">Summary</div>
    </div>
</div>

CSS

.wrap
{
    width:480px;
    height:300px;
    border:2px solid darkslategray;
}

.expando
{
    height:300px;
    width:60px;
    float:left;
    border-top:0px solid white;
    cursor:pointer;
    writing-mode: lr-tb;
}

.title
{
    background-color:white;
    -webkit-transform: rotate(270deg);	
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    color:black;
    font-size:0.8em;
    padding:4px 2px 4px 2px;
    border-radius:10px;
    margin-top:40px;
    text-align:center;
    width:80px;
    margin-right:auto;
    margin-left:auto;
}


.expando:hover
{
    box-shadow: 4px 4px 4px rgba(34,34,34,0.6);
}


.one
{ 
    background-color:violet; 
}
.two
{ 
    background-color:indigo; 
}
.three
{ 
    background-color:blue; 
}
.four { background-color:green;}
.five { background-color:yellow; }
.six { background-color:orange; }
.seven { background-color:red }

JavaScript

$('.expando').hover(function(){
    $(this).stop().animate({
        "margin":"6px 4px 0px 4px",
        "width":"110px"},300);
    $('.expando').css("opacity","1.0").not(this).css("opacity","0.3");
    },function(){
    $(this).stop().animate({
        "margin":"0px",
        "width":"60px"},100);
    //$('.expando').css("opacity","1.0");
});

$('.wrap').hover(function(){
    $('.expando').css({"opacity":"1.0"});
});