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">
<a class="aSimple" href="/ViraBase/Home/GetPage?cId=00010" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">کتاب الکترونیک</a><a class="aSimple" href="/ViraBase/Home/GetPage?cId=00007" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">دسته بندی دوم</a><a class="aSimple" href="/ViraBase/Home/GetPage?cId=00008" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">دسته بندی سوم</a><a class="aSimple" href="/ViraBase/Home/GetPage?cId=00019" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">ebook5</a>            </div>
            <div class="catOwner">
<a class="aSimple" href="/ViraBase/Home/GetPage?cId=00011" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">کتاب</a>            </div>
            <div class="catOwner">
<a class="aSimple" href="/ViraBase/Home/GetPage?cId=00012" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">Music</a>            </div>
            <div class="catOwner">
<a class="aSimple" href="/ViraBase/Home/GetPage?cId=00013" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">TV Shows</a>            </div>
            <div class="catOwner">
<a class="aSimple" href="/ViraBase/Home/GetPage?cId=00014" style="margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">CatUp71</a>            </div>
            <div class="catOwner" style="margin-right: 4px;">
                    <span style="font-size: 18px; font-weight: normal; margin: 2px; display: block; background-color: transparent; color: #b2b2ba;">بیش‌تر</span>
<a class="aSimple" href="/ViraBase/Home/GetPage?cId=00015" style="margin: 2px; display: block;...

CSS

#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));*/
}


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

#catHolderMiddle
{
    position: absolute;
    top:0px;
    left:0px;


    -webkit-filter: blur(2px) ;
    -moz-filter: blur (15px);
    -o-filter: blur (15px);
    -ms-filter: blur (15px);
    filter: blur(2px);
    opacity: 1;
}

#inner {
/* position: absolute; */
/* width: 928px; */
height: 100%;
top: 0px;
/* left: 50%; */
/* margin-left: -50px; */
/* background-color: #365d98; */
background-color: transparent;
border: 0px solid red;
/* color: transparent; */
}

#headerTwo {
position: fixed;
top: 48px;
width: 100%;
height: 32px;
line-height: 32px;
background-color: #f3f3f4;
vertical-align:...