JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
  !function(e,t,i){t.behaviors.accessibility_focus_order={attach:function(t){e(document).ready(function(){if(e(".mega-menu-updated").length>0){let t=e(".sec_menu--li:last-child li:last-child"),i=e(".sec_menu--li:last-child .sec_menu--no-child"),a=e(".sec_menu--li:first-child .sec_menu--no-child"),n=e(".sec_menu--li:first-child li:first-child");e(n).keydown(function(t){9===t.which&&t.shiftKey&&(t.preventDefault(),e(this).parents(".mega-menu").find(".mega-menu-title").focus())}),e(t).keydown(function(t){t.preventDefault(),9===t.which&&(t.shiftKey?e(this).prev().find("a").focus():e(this).parents(".mega-menu-left").prev().find(".menu-item a").first().focus())}),e(a).keydown(function(t){t.preventDefault(),9==t.which&&(t.shiftKey?e(this).parents(".mega-menu").find(".mega-menu-title").focus():e(this).parent().next().find(".sec_menu--no-child").focus())}),e(i).keydown(function(t){t.preventDefault(),9==t.which&&(t.shiftKey?e(this).parent().prev().find(".sec_menu--no-child").focus():e(this).parents(".mega-menu-left").prev().find(".menu-item a").first().focus())})}else{let s=e(".mega-menu-left li:last-child a"),o=e(".mega-menu-left li:first-child a");e(o).keydown(function(t){let i=t.which;9===i&&t.shiftKey&&(t.preventDefault(),e(this).parents(".mega-menu").find(".mega-menu-title").focus())}),e(s).keydown(function(t){t.preventDefault();let i=t.which;9===i&&(e(this).parents(".mega-menu-left").prev().find(".menu-item a").first().focus(),t.shiftKey&&(t.preventDefault(),e(this).parent().prev().find("a").focus()))})}let r=e(".mega-menu-title"),l=e(".menu-item:first-child a");e(r).keydown(function(t){if(9===t.which){if(t.shiftKey){let i=e(window);function a(){let t=i.width();t<1169&&e(this).parents("li").find(".mega-menu-trigger").focus()}a(),i.resize(a)}else t.preventDefault(),e(this).parents(".mega-menu").find(".mega-menu-left li...