JSFiddle - React, Tailwind, and code Playground

by yahya suteja

HTML

<div class="container">
    <section class="notif notif-notice">
      <h6 class="notif-title">Perhatian!</h6>
      <p>Untuk Copy Tekan Tombol Ctrl + C</p>
      <p>Untuk New Tab Tekan Tombol Ctrl + Klik Kanan</p>
        <div class="notif-controls">
        <a href="#" class="notif-minimize">Minimize</a>
        <a href="#" class="notif-zoom">Zoom</a>
        <a href="#" class="notif-close">Close</a>
      </div>
    </section>
  </div>

CSS

.container {right: 10px;top: 10px;margin: 20px auto;width: 380px;z-index: 999999;position: fixed;-webkit-animation: fadeOutnotif 10s linear forwards; /* Waktu notifikasi 10 detik */-moz-animation: fadeOutnotif 10s linear forwards;-o-animation: fadeOutnotif 10s linear forwards;-ms-animation: fadeOutnotif 10s linear forwards;animation: fadeOutnotif 10s linear forwards;}.container .notif {margin: 10px 0;}.notif {position: relative;padding: 25px 30px 25px 100px;min-height: 50px;line-height: 22px; background: white;border-radius: 2px;}.notif:before {content: '';position: absolute;top: 25px;left: 30px;width: 40px;height: 40px;border: 5px solid;border-radius: 25px;}.notif p {font-size: 11px;color: #666;}.notif-title { margin: 0 0 5px; font-size: 14px; font-weight: bold; color: #333;}.notif-title:before, .notif-title:after {content: ''; position: absolute;background: white;border-radius: 2px;}.notif-notice:before {background: #a7d155;border-color: #8fb14f;}.notif-notice .notif-title:before, .notif-notice .notif-title:after {top: 44px;left: 55px;width:4px; height: 12px;  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);}.notif-notice .notif-title:after {top: 50px; left: 48px;width: 8px;height: 4px;}.notif-controls { position: absolute; top: 0; right: 0; height: 16px; padding: 4px 3px 5px;background: #f0f0f0;border: solid #dcdcdc; border-width: 0 0 1px 1px;border-radius: 0 2px;}.notif-controls > a {position: relative;float: left;margin: 0 1px;width: 16px;height: 16px;  font: 0/0 serif;text-shadow: none;color: transparent;}.notif-minimize:before {content: '';position: absolute;top: 11px;left: 4px;width: 7px;height: 2px;background: #bbb;}.notif-minimize:hover:before {background: #888;}.notif-zoom:before {content: '';position: absolute;top: 6px;left: 3px;width: 5px;height: 3px;border: 2px solid #bbb;}.notif-zoom:hover:before {border-color: #888;}.notif-close:before,...