JSFiddle - React, Tailwind, and code Playground

by Wendell Christian

HTML

<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="pt-br">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Painel</title>

    <!-- Bootstrap core CSS -->
<link href="http://sagencia.ml/diario-v4/css/bootstrap.min.css" rel="stylesheet" >


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <script src="https://kit.fontawesome.com/d398a7aec0.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
    <link href="http://sagencia.ml/diario-v4/css/signin.css" rel="stylesheet">
  </head>
  <body class="text-center">
    
      <form class="form-signin">
        <div class="app-tela m-0 p-0">
          <div class="app-tela rolagem">
            <img class="mb-4" src="http://sagencia.ml/diario-v4/img/logo-diario-da-comunidade-h.png" alt="Diário da Comunidade" width="180">
            <div class="banners mb-3">
              <div...

CSS

.mcontclose {width:100%; height:100%;
position:fixed;
left:0; top:0;
z-index:9;}

.dropdown{
  z-index: 100;
  display:none;
  transition: opacity 400ms ease-out; 
  opacity:0;
}
.dropdown.active {
  opacity:1;
  display:block;
  transform: translate(0, -100%);
  position:relative;
  top:-50px;
  float:right;
  right:0;
  width:11em;
  height:150px
  
  }
  
  


.dropdown a {
    color: white;
    padding: 9px 9px;
    text-decoration: none;
    display: block;
    text-align:center;
}
#mcontainer {
  border-radius:4px;
  background-color: rgba(0,0,0,0.9);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 99999;
    padding:5px;
}
.dropdown a:hover {background-color: rgba(0,0,0,0,0.4)}

JavaScript

$('#active-menu-config').click(()=>{
		  $(".dropdown").toggleClass('active'); 
		});

		$('#mcontainer').click(()=>{ 
		  $('.dropdown').removeClass('active');
		});
    $(".mcontclose").click(()=>{ 
      $('.dropdown').removeClass('active');
    });