JSFiddle - React, Tailwind, and code Playground

by Sergio Crisostomo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pecaGas" style="display: block;">Encomende</div>
<div class="peca" style="display: block;">
    <button class="fechaPeca"><img src="_img/btn-close.png"></button>

    <h1 class="h1Centralizado">Peça suas botijas</h1>

    <label for="nomePeca" class="labelPequeno">Nome</label>
    <input type="text" name="nomePeca" id="nomePeca" class="typeTextPequeno" placeholder="Nome" required="">
    <br>
    <br>

    <label for="enderecoPeca" class="labelPequeno">Endereço</label>
    <input type="text" name="enderecoPeca" id="enderecoPeca" class="typeTextPequeno" placeholder="Endereço completo" required="">
    <br>
    <br>

    <label for="bairroPeca" class="labelPequeno">Bairro</label>
    <select name="bairroPeca" class="typeTextPequeno" required="">
        <option value="">Selecione o bairro</option>
        <option value="1">Bairro</option>
    </select>
    <br>
    <br>

    <label for="telefonePeca" class="labelPequeno">Telefone</label>
    <input type="text" name="telefonePeca" id="telefonePeca" class="typeTextPequeno" placeholder="Telefone">
    <br>
    <br>

    <label for="quantidadePeca" class="labelPequeno">Quantas botijas?</label>
    <input type="text" name="quantidadePeca" id="quantidadePeca" class="typeTextPequeno" placeholder="Quantas Botijas">
    <br>
    <br>


    <button class="btnPecaGas">Peça já o seu</button>

</div>

CSS

div.peca,
div.pecaGas {
    padding: 20px;
    border: 1px solid #ddd;
    position: fixed;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
}

div.peca {
    right: -300px;
    transition: right .6s;
}

div.peca.aberto {
    right: -10px;
}

div.pecaGas {
    cursor: pointer;
    top: 50px;
    right: -30px;
    transform: rotate(270deg);
}

JavaScript

// JavaScript Document
$(document).ready(function(e) {
    $(document).on('click', function(e) {
        if ($(e.target).closest('div.pecaGas')) {
            $('div.peca').toggleClass('aberto');
        } else if (!$(e.target).closest('div.peca')) {
            $('div.peca').removeClass('aberto');
        }
    });
});