JSFiddle - React, Tailwind, and code Playground

by azizul

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Elements MegaMenu - html</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500" rel="stylesheet">


    <link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
    <link rel="stylesheet" href="assets/themify-icons/themify-icons.css">

    <!-- <link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="assets/owl-carousel/owl.carousel.min.css"> -->
    <link rel="stylesheet" href="temp/styles/styles.css">
  </head>

  <body style="background: green;">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <div class="container">
      <div class="megaMenu megaMenu-horizontal">
        <div class="megaMenu__item">
          <div class="megaMenu__item-trigger">
            Dropdown
            <span class="mega-icon"><i class="ti-angle-down"></i></span>
          </div>
          <ul class="megaMenu__drop megaMenu__nav megaMenu__nav--min">
            <li class="megaMenu__drop__title">Top Wear</li>
            <li>
              <a href="#">
              <span class="megaMenu__nav__icon"><i class="ti-package"></i></span>Casual Shirts
              <span class="megaMenu__nav__arrow"><i class="ti-angle-right"></i></span>
            </a>
              <ul class="megaMenu__nav">
                <li><a href=""><span class="megaMenu__nav__icon"><i class="ti-package"></i></span>Formal Shirts</a></li>
                <li><a href=""><span class="megaMenu__nav__icon"><i class="ti-package"></i></span>Formal Shirts</a></li>
               ...

SASS

// @import "base/_bootstrap";
// @import "node_modules/slick-carousel/slick/slick.scss";
// @import "node_modules/slick-carousel/slick/slick-theme.scss";
// @import "base/_custom-variables";
// @import "base/_global";
// @import "modules/_overview";
// @import "modules/_card";
// @import "modules/_table";
// @import "modules/_team";
// @import "modules/_social";
// @import "modules/_progressBar";
// @import "modules/_status";
// @import "modules/_slider";
// @import "modules/_checkbox";
// @import "modules/_media";

*{
  box-sizing: border-box;
}

.container{
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}

.megaMenu{
  background: #fff;
  font-family: 'Roboto', sans-serif;
  position: relative;

  a{
    text-decoration: none;
  }

  ul{
    list-style-type: none;
  }

  // megamenu dropdown
  &__drop{
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 60px;
    left: 0;
    padding: 25px;
    transform: scale(.9);
    transform-origin: 0 0;
    opacity: 0;
    z-index: -1;
    background: #2d3550;
    transition: all .35s ease-in;

    // megamenu title
    &__title{
      font-size: 12px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-bottom: 1px solid transparent;
      margin-bottom: 15px;
      padding-bottom: 10px;
    }
  }

  // megamenu itme
  &__item{
    float: left;

    &-trigger{
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 500;
      color: #828bb2;
      padding: 23px 10px 23px 15px;
      cursor: pointer;
      transition: all .3s ease;

      .mega-icon{
        padding-right: 5px;
        padding-left: 5px;
        display: inline-block;
        transition: transform .3s ease;
      }
    }

    &--visible{

      .megaMenu__item-trigger{
        color: #fff;
        background: linear-gradient( to right, rgb(241,61,128) 0%, rgb(244,132,100) 100%);

        .mega-icon{
        ...

JavaScript

! function(a, b, c, d) {
  "use strict";
  var e = function(b) {
    this.owl = b, this._thumbcontent = [], this._identifier = 0, this.owl_currentitem = this.owl.options.startPosition, this.$element = this.owl.$element, this._handlers = {
      "prepared.owl.carousel": a.proxy(function(b) {
        if (!b.namespace || !this.owl.options.thumbs || this.owl.options.thumbImage || this.owl.options.thumbsPrerendered || this.owl.options.thumbImage) {
          if (b.namespace && this.owl.options.thumbs && this.owl.options.thumbImage) {
            var c = a(b.content).find("img");
            this._thumbcontent.push(c)
          }
        } else a(b.content).find("[data-thumb]").attr("data-thumb") !== d && this._thumbcontent.push(a(b.content).find("[data-thumb]").attr("data-thumb"))
      }, this),
      "initialized.owl.carousel": a.proxy(function(a) {
        a.namespace && this.owl.options.thumbs && (this.render(), this.listen(), this._identifier = this.owl.$element.data("slider-id"), this.setActive())
      }, this),
      "changed.owl.carousel": a.proxy(function(a) {
        a.namespace && "position" === a.property.name && this.owl.options.thumbs && (this._identifier = this.owl.$element.data("slider-id"), this.setActive())
      }, this)
    }, this.owl.options = a.extend({}, e.Defaults, this.owl.options), this.owl.$element.on(this._handlers)
  };
  e.Defaults = {
    thumbs: !0,
    thumbImage: !1,
    thumbContainerClass: "owl-thumbs",
    thumbItemClass: "owl-thumb-item",
    moveThumbsInside: !1
  }, e.prototype.listen = function() {
    var b = this.owl.options;
    b.thumbsPrerendered && (this._thumbcontent._thumbcontainer = a("." + b.thumbContainerClass)), a(this._thumbcontent._thumbcontainer).on("click", this._thumbcontent._thumbcontainer.children(), a.proxy(function(c) {
      this._identifier = a(c.target).closest("." + b.thumbContainerClass).data("slider-id");
      var d = a(c.target).parent().is(this._thumbcontent._thumbcontainer) ? a(c.target).index()...