JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<body>
    <button class='show'>Muncul dialog</button>
    <div class='d-box'>
        <header class='d-box_head'>Judul
            <div class='d-box_close'>&times;</div>
        </header>
        <div class='d-box_body'>Activate your browser microphone near your URL bar above. Talking on your microphone through your web browser is an experimental feature. Read more about Audio Chat here.</div>
    </div>
</body>

CSS

body {
     font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
 }

 .show {

     margin:0 0 20px;

 }

 .d-box {

     position: fixed;

     background-color: #FFF;

     color: #000;

     padding: 0px 7px;

     z-index: 100;

     width: 286px;

     border-radius: 4px;

     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);

     display:none;

 }

 .d-box_head {

     font-weight: bold;

     font-variant: normal;

     text-align: center;

     font-family: Arial;

     color: #FFF;

     margin: 0px -7px;

     padding: 10px 4px 5px 30px;

     height: 24px;

     background-color: #0095DD;

     border-radius: 4px 4px 0px 0px;

     position: relative;

     border-bottom: 1px solid #0071A7;

 }

 .d-box_close {

     background-color: inherit;

     border-width: medium medium medium 1px;

     border-style: none none none solid;

     border-color: transparent transparent transparent #0071A7;

     border-image: none;

     padding: 0px;

     margin: -10px -4px 0px 0px;

     float: right;

     font-weight: bold;

     font-size: 33px;

     cursor: pointer;

     width: 39px;

     height: 39px;

     border-top-right-radius: 4px;

     color:rgb(128, 202, 238)

 }

 .d-box_close:hover {

     background-color: rgba(0, 0, 0, 0.1);

     color:#fff

 }

 .d-box_body {

     font-size: 13px;

     margin: 15px 7px;

 }

JavaScript

$(function () {
    //Tampilkan kotak dialog saat .muncul diklik
    $('.show').click(function () {
        $('.d-box').fadeIn();
    });
    //Tutup kotak dialog saat .close diklik
    $('.d-box_close').click(function () {
        $('.d-box').fadeOut();
    });
});