JSFiddle - React, Tailwind, and code Playground

by love4all1080

HTML

<div class="menuHolder">

    <ul class="nav">

        <li><a class="top-a" href="#url"><b>Home</b></a></li>

        <li><a class="top-a" href="#url"><b>Resort</b></a>

        <div class="col3">

            <ul class="colLeft">

                <li><a href="#url">Ski Slopes</a></li>

                <li><a href="#url">Night Life</a></li>

                <li><a href="#url">Restaurants</a></li>

                <li><a href="#url">Car Hire</a></li>

                <li><a href="#url">Ski Hire Facilities</a></li>

            </ul>

            <ul class="col">

                <li><a href="#url">Snow Hotel</a></li>

                <li><a href="#url">The Snowman</a></li>

                <li><a href="#url">Ice Cavern</a></li>

                <li><a href="#url">Ski Inn</a></li>

            </ul>

            <ul class="colRight">

                <li><a href="#url">Advanced Skills</a></li>

                <li><a href="#url">Beginners Slopes</a></li>

                <li><a href="#url">Intermediate Slopes</a></li>

                <li><a href="#url">Expert</a></li>

            </ul>

        </div>

        </li>

        <li><a class="top-a" href="#url"><b>Information</b></a>

        <div class="col2">

            <ul class="colLeft">

                <li><a href="#url">Lift Passes</a></li>

                <li><a href="#url">Insurance</a></li>

                <li><a href="#url">Ski Schools</a></li>

                <li><a href="#url">Snow Report</a></li>

                <li><a href="#url">Gear Rental</a></li>

            </ul>

            <ul class="colRight">

                <li><a href="#url">Boots</a></li>

                <li><a href="#url">Skis</a></li>

                <li><a href="#url">Ski Wear</a></li>

                <li><a href="#url">Goggles</a></li>

            </ul>

        </div>

        </li>

        <li><a class="top-a" href="#url"><b>Contact</b></a>

        <div class="col1">

            <ul class="colSingle">

              ...

CSS

.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;

background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));

background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));

background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));

border-radius:8px;

box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);

-moz-perspective: 100px;

-webkit-perspective: 100px;

-o-perspective: 100px;

perspective: 100px;

}

.menuHolder ul.nav li {display:inline-block; display:inline;}



.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;

-moz-transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

}



.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}

.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}



.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}

.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}



.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;

-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);

-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);

-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);

box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);

}



.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; 

border-radius:0 0 15px 15px;

box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);



-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;



-moz-transform-origin: 0px 0px;

-moz-transform:...