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>
   </head>

   <body translate="no" id="body">
      <div id="container">
         <div id="header">
            <a>Header</a>
         </div>


         <div id="mainBody">
            <a>Main</a>


            <h2>Mart</h2>
            <div>
               <button href="#collapse1" class="nav-toggle">Show</button>
               <!Search filter>
               <button onclick="$('tbody tr').show()">All</button>
               <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
               <!Search filter>
               <button onclick="sortTableA()">Az</button>
               <button onclick="sortTableZ()">aZ</button>

               <button href="#collapse1QR" class="nav-toggleQR">+QR</button>

               <div id="collapse1QR" style="display:none">
          ...

CSS

#container {
         width: 500px;
         margin: auto;
         background-color: beige;
      }

      body {
         background: white;
         font-family: tahoma;
      }

      #myTable {
         width: 100%;
         margin: auto;
      }
		.accordion {
						margin-top:0.2rem;
		}

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

      .accord-content {
         width: 100%;
         height: 250px;
         z-index: -1;
         display: none;
         background: orange;
         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: 100%;
         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;
         backface-visibility: hidden;
      }

      .card .front {
         background: beige;
         cursor: pointer;
			color:red;
			border-radius: 0.5rem;
			border: 0.1rem solid...

JavaScript

//# Accordion

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