JSFiddle - React, Tailwind, and code Playground

by fiddledrew

HTML

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


https://01.org/rib/online/
<!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 27 Nov 2018 edit AG HN OT UZ New SORT</a>
        <br>
        <a> 5.30pm - Edit</a>
      </div>
      <div id="mainBody">
        <a>Main</a>

        <div class="none-sq-price">
          <div id="subMenu">
            <button href="#" class="change-price">&#128269;</button>

            <button href="#collapseAM" class="nav-toggleAM">A.M</button>
           ...

CSS

.alert {
  padding: 1.2rem;
  background-color: #f44336;
  color: white;
  Margin-left: auto;
  margin-right: auto;
}

.closebtn {
  margin-left: 10rem;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 3rem;
  line-height: 1rem;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}


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: 78%;
  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: 3.rem;
  height: 1.2rem;
  border-radius: 0.0rem;
  font-size: 0.8rem;
	font-family: 'Monda';
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
  color: navy;
  padding-bottom: 1.3rem;
}

#subMenu,
#subMenuAM,
#subMenuNZ,
#collapse1Sort {
  width: 100%;
  text-align: center;
}

#subMenu div {
  width: calc(100% / 6);
  display: inline;
  vertical-align: top;
  border: 0px solid red;
  text-align: center;
  margin: 0%;
  padding: 0.0rem;
}



.nav-last,
.nav-first {
  width: 8rem;
	font-size:0.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;
 ...

JavaScript

//# Accordion

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