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>


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

  <body translate="no" id="body">
    <div id="container">
      <div id="header">
        <a>Header New 19 Nov 2018</a>
      </div>


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


      <div id="footer">
        <a>Footer</a>
      </div>

    </div>

  </body>

</HTML>

CSS

#container,
      #myInput {
        width: 30rem;
        margin: auto;
        background-color: beige;
      }

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

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

      .accordion {
        margin-top: 0.0rem;
        font-family: courier;
      }

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

      .accord-content {
        width: 98%;
        height: 350px;
        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: 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;
        backface-visibility: hidden;
      }

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

JavaScript

//# Accordion

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