JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div id="headerTwo">
    


    <div id="outer" style="top: -20px; display: block; background-color: rgba(54, 93, 152, 0.980392);">
        
        <div id="inner">
            <div class="catOwner">                
                <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item 1.1</span>                     
                <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item 1.2</span>                     
                <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item 1.3</span>                     
            </div>
            
        <div class="catOwner">
                
                <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item 2.1</span>
            <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item 2.2</span>                     
            <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item 2.3</span>                     
            <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item 2.4</span>                     
                     
            </div>
            
            <div class="catOwner">
                
                <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item 3.1</span>
                     <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item 3.2</span>                     
            </div>
            
            <div class="catOwner">
                
                <span class="aSimple" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Item...

CSS

html, body {
    direction: rtl;
    font-family: 'Times New Roman';
}

#InvoceLink
{
    float: right;
    width: 160px;
    background-color: transparent; /*yellow;*/
    color: #616266;
    font-size: 16px;
    margin-right: 24px;
    text-align: right;
    /*overflow: hidden;*/
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%);

    /*background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);*/

    /*background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));*/
}

#outer2{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    
    position: static;
}


#outer {
position: fixed;
 width: 900px;
/* height: 300px; */
/* margin: 20px auto; */
margin: 20px -464px;
/* margin: 20px -25%; */
left: 50%;
border: 0px solid #c00;
/* background-color: #365d98; */
background-color: aqua;
/* background-color: yellow; */
opacity: 1;
top: -20px;
display: none;
}

#inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction:...