JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<nav>
  <input type="checkbox" id="nav" class="hidden"/>
  <label for="nav" class="nav-open"><i></i><i></i><i></i></label>
  <label class="c">
  <a>&#9740;</a>
  <input class="s" type="checkbox">
  <span>
  <div>
<a style="font-size:24px;position:absolute;right:25px;top: 25px;">X</a>
<form class="searchform cf">
  <input id="search" type="text" placeholder="Stargate sg1">
  <button type="submit">Recherche</button>
</form>
<div id="search_result" class="search_result">
<ul class="carousel">
  <li style=" background-image:url(https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg);">
    <div>
    <a>Mr Robot</a>
    <ul id="star-rating">
<li class="rated">1</li>
<li class="rated">2</li>
<li class="rated">3</li>
<li>4</li>
<li>5</li>
</ul>
    <a>2012</a>
    <div>
      <p>
          “Proven Innocent” racconta la storia emotiva della lotta di una donna per dimostrare l’innocenza di persone condannate ingiustamente. Il dramma legale segue una sfortunata società di difesa criminale guidata da un avvocato feroce e intransigente, Madeline Scott, che è stato ingiustamente condannato in un caso di omicidio sensazionale che l’ha resa una famigerata ossessione mediatica. Madeline gestisce lo studio legale con il suo socio, Easy Boudreau, l’avvocato che l’ha aiutata a liberarsi dopo 10 anni di carcere. Il loro team comprende anche l’investigatore Bodie Quick e il direttore delle comunicazioni Violet Price, che gestisce un vero podcast criminale che segue ogni indagine.
      </p>
    </div>
     <span><a href="google.fr"></a></span>
    </div>
  </li>
    <li style=" background-image:url(https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg);">
    <div>
    <a>Mr...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body{
  background:#111;
  }
.u {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 10px;
}

.u li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

body {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
}

.nav-container > a{
  float:left;
  position: relative;
  top:-16px;
  font-size:24px;
  color: #fff;
  margin-right: 40px;
} 
nav{
  line-height: 30px;
}
.nav-container > a > from > input{
  width:330px;
  background: rgba(0,0,0,0.2);
  border: solid 1px  rgba(255,255,255,0.5);
  border-radius: 5px;
  font-size:22px;
  text-align:center;
  color: #fff;
}
nav {
  display:block;
 padding: 30px;
 background: #282a2c;
}
nav > label.c > span  {
  display: none;
  opacity:0;
  pointer-events: none;
  transition: opacity 0.4s ease;
    position: absolute;
  top:0;
  right:0;
  left:0;
  background: #111;
  z-index: 9;  
  overflow: hidden;
  height:100vw;
}
nav > label.c > span > div  {
  
  }
nav...

JavaScript

function loadNewpages(a)
{
  if(a.scrollTop == a.scrollTopMax)
  {
    console.log("new content");
  }
}

$(document).ready(function () {
    $("#search").autocomplete({
        source: function(request, response) {
            $.getJSON("https://suggestqueries.google.com/complete/search?callback=?",
                { 
                  "hl":"en", // Language                  
                  "jsonp":"suggestCallBack", // jsonp callback function name
                  "q":request.term, // query term
                  "client":"youtube" // force youtube style response, i.e. jsonp
                }
            );
            suggestCallBack = function (data) {
                var suggestions = [];
                $.each(data[1], function(key, val) {
                    suggestions.push({"value":val[0]});
                });
                suggestions.length = 5; // prune suggestions list to only 5 items
                response(suggestions);
            };
        },
    });
});
var numberOfSelects = $('select').length;

// Iterate over each select element
$('select').each( function() {
    
    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;
    
    // Hides the select element
    $this.addClass('hidden');
    
    // Wrap the select element in a div
    $this.wrap('<div class="select" />');
    
    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');
    
    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');
    
    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());
    
    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class' : 'options'
    }).insertAfter($styledSelect);
    
    // Insert a list item into the unordered list for each select option
    for(var i...