JSFiddle - React, Tailwind, and code Playground

by fiddledrew

HTML

<!DOCTYPE html http://jsfiddle.net/MChfU/ ; view-source:http://fiddle.jshell.net/MChfU/show/;>
<!DOCTYPE html

https://blog.calebnance.com/jquery/very-easy-accordion-with-jquery-from-scratch.html
Hover pop out menu	https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text 

Sort Table	 	https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table 
Search Table row	https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filters_table 

Click Flip	 	https://jsfiddle.net/james2doyle/qsQun/ 
A-Z filtering		http://jsfiddle.net/MChfU/ 
Google maps	 	https://css-tricks.com/snippets/html/get-directions-form-google-maps/ 
	 and 
Google maps	 	https://www.google.com/maps/dir/Current+Location/{latitude},{longitude}
QR Code link
Warning Cookie alert	https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_alert
>
<! https://github.com/ikromin/misc/blame/master/yahooweather/weather_yql_example.html >

<HTML>
  <STYLE>


  </STYLE>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <! https://blog.calebnance.com/jquery/very-easy-accordion-with-jquery-from-scratch.html>

  <head>
    <link href='https://fonts.googleapis.com/css?family=Monda' rel='stylesheet'>
  </head>


  <body translate="no" id="body">
    <div id="container">
      <div class="alert">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
      </div>
      <div id="header">
        <a>Header</a>
        <br>
        <a>New 26 Nov 2018 edit AG HN OT UZ New SORT</a>
        <br>
        <a> 7pm++</a>
      </div>
      <div id="mainBody">
        <a>Main</a>

        <div id="subSwitch">
        </div>

        <div id="subMenu">

          <div><button href="#SubMenuAZ" class="nav-toggle">A.Z</button></div>
          <div><button href="#collapse1Sort" class="nav-Sort">Sort</button></div>
          <div><button...

CSS

body {
  background: white;
  color: slate;
  font-family: 'Monda';
  font-size: 1rem;
}

#container {
  background-color: beige;
  width: 30rem;
  Margin-left: auto;
  margin-right: auto;
}

#myInput {
  width: 95%;
  background-color: #A5DBEB;
  margin: auto;
  margin-left: 0.2rem;
  margin-right: auto;
  border-radius: 5rem;
  padding-left: 1rem;
}

#myTable {
  width: 100%;
  margin: auto;
}

Button {
  margin-left: auto;
  margin-right: auto;
  width: 4rem;
  height: 1.5rem;
  border-radius: 0.0rem;
}

.nav-toggle,
.nav-Sort,
.nav-All,
.nav-toggleQR,
.nav-toggleSearch {
  font-family: 'Monda';
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
  color: navy;
  padding-bottom: 1.5rem;
}

.nav-last,
.nav-first {
  font-size: 1rem;
  width: 8rem;
}

.nav-last {
  color: red;
}

.accordion {
  margin-top: 0.0rem;
  color: black;
}

.accord-header {
  width: 98%;
  cursor: pointer;
  padding-left: .20rem;
  border: 0.1rem solid navy;
  border-radius: .5rem;
  background-color: white;
}

.accord-content {
  width: 98%;
  height: 350px;
  z-index: -1;
  display: none;
  background: white;
  border: 2px solid silver;
  border-radius: 5px;
}

.on {
  background: silver;
}

.container {
  width: 100%;
  height: 75%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 75%;
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.card div {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: .7rem;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
 ...

JavaScript

//# Accordion

//# Accordion
//# sourceURL=pen.js