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>
				
				<button onclick="myFunction()">Click Me</button>

<div id="myDIV">
  This is my DIV element.
</div>
				
				        <!dropdown menu filter>
        <div class="dropdown"><span>Alpha</span>
          <div class="dropdown-content">
            <button onclick='show("A")'>A</button>
            <button onclick='show("B")'>B</button>
            <button onclick='show("C")'>C</button>
            <button onclick='show("H")'>H</button>
            <button onclick='show("L")'>L</button>
            <button onclick='show("N")'>N</button>
            <button onclick='show("Z")'>Z</button>
          </div>
        </div>
        <button onclick="$('tbody...

CSS

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

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

      #myTable {
      	width : 100%;
            margin: auto;
      }
			td {padding : 2px;}

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

      .accord-content {
        display: none;
        background: orange;
        border: 2px solid grey;
        border-radius: 5px;
      }

      .on {
        background: silver;
      }

      .container {
        width: 100%;
        height: 150%;
        border: 1px black;
        position: relative;
        border: 1px solid #ccc;
        -webkit-perspective: 800px;
        -moz-perspective: 800px;
        -o-perspective: 800px;
        perspective: 800px;
      }

      .card {
        width: 100%;
        height: 100px;
        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%;
        color: blue;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        position: absolute;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
      }

      .card .front {
        background: beige;
      }

      .card .back {
        background: white;
        -webkit-transform: rotateX( 180deg);
        -moz-transform: rotateX( 180deg);
        -o-transform:...

JavaScript

//# Accordion

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