JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href="#">Movie</a>
  <a href="#">TvShow</a>
  <a href="#">Contact</a>
  <a href="logout.php">logout</a>
  
  
</div>

<div id="main">
  
  <div class="menu">
   <span> <a style="font-size:22px;cursor:pointer" onclick="openNav()">&#9776; 
   </a>
   <from action="login.php" method="post">
   <div class="container_f">
  <div class="child one">
    <input onclick="search(this)" name="q" type="text">
  </div> 
  <div class="child two">
    <button  type="submit">
      search
    </button>
  </div>
</div>
</from>
   </span>
  </div>
  <div class="form">
  <div id="search" class="search">
  <iframe id="ifram_search" src="">
  
  </iframe>
  </div>
    <img src='//img.betaseries.com/aNFwhyiJ2LI0VGmOHh2fjeKNdNE=/1440x320/smart/https%3A%2F%2Fpictures.betaseries.com%2Ffonds%2Fshow%2F12_960483.jpg'>
   <div class="items_tow">
     <div>
<div class="header-right">
        <h1>Big Fish</h1>
        <h2>2003<span>2h05</span></h2>
       <p>A frustrated son tries to determine the fact from fiction in his dying father's life.</p> 
         <div class="rating">8.9</div>
        <div class='info'>
          <h4>Director:</h4>
          <h5>Tim Burton</h5>
        </div>
        <div class='info'>
          <h4>Starring: </h4>
          <h5>Ewan McGregor, Albert Finney, Billy Crudup </h5>
        </div>
        <div class='info'>
          <h4>Genres:</h4>
          <h5>Family, Children</h5>
        </div>
      </div>

     </div>
     <div>
<section class="container">
  <div class="ac"> 
    <input class="ac-input" id="ac-1" name="ac-1" type="checkbox" />
    <label class="ac-label" for="ac-1">Saison 1</label>
    <article class="ac-text">
      <div class="ac-sub">
        <input class="ac-input" id="ac-2" name="ac-2" type="radio" />
        <label class="ac-label" for="ac-2">Episode 1</label>
        <article class="ac-sub-text">
   ...

CSS

body, html {
  font-family: "Lato", sans-serif;
   background-color: #111;
   margin: 0;
   padding:0;
   height: calc(100% - 10px);
   overflow: hidden;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 50px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 22px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
  margin-left:15px;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  background: #111;
  transition: margin-left .5s;
  border-radius:8px;
  height: 100%;
 // margin: 0 auto !important;
}
#main .menu{
  padding: 5px 20px;
  border-radius:7px 7px 0 0;
background:#111;
color: white;
}
.form {
  position:relative;
}
.form img{
  width:100%;
  height:230px;
}
.container_f {
  padding: 5px;
  display: -webkit-flex;
  display: flex;
   width:50%;
   float:right;
   margin-top: -5px;
}

.child.one {
  -webkit-flex: 5 1 200px;
  flex: 5 1 200px;
}
.child.one > input{
  width:100%;
  border-radius:5px 0 0 5px;
  border: 1px #727272 solid;
  background: rgba(0,0,0,0);
  font-size: 16.6px;
  outline: none;
  text-align:center;
  border-right:0;
  color:white;
}
.child.two {
  -webkit-flex: 1 3 20px;
  flex: 1 3 20px;
}
.child.two button{
  width:100%;
  border-radius:0 5px 5px 0;
  outline: none;
  font-size: 13.5px;
  border: 1px #727272 solid;
  border-left:0;
  background: rgba(0,0,0,0);
  color: white;
  padding: 3px 10px;
  cursor:pointer;
}
ul{list-style:none;margin:0;padding:0;}






body {
  font-family: 'Source Sans Pro', sans-serif;
  padding:0;
  margin:0;
}

h1 {
  padding-bottom: 0;
  margin-bottom: 0;
}

h3 {
  margin-top: 0;
  font-weight: 300;
}

.container {
  width: 100%;

  position:absolute;
}
.ac {
  margin : 0;
  height: calc(100vh - 269px);
overflow-y:...

JavaScript

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
function modale_c(a)
{
	document.getElementById('myModal').style.display = "none";
}
function modale(a)
{
	document.getElementById('myModal').style.display = "block";
  document.getElementById('fram').src = a.id;
}
function search(a)
{
	var search_box = document.getElementById('search');
  search_box.style.display = "block";
  
  var ifram_search = document.getElementById('ifram_search');
  ifram_search.src="search.php?search="+a.value;
}