JSFiddle - React, Tailwind, and code Playground

by Syajihad ra

HTML

<div class="wrap">
  <div class="a"></div>
    <div class="b">
Ini sebatas demo
  </div>
</div>

CSS

.a {
  margin:0 auto;
width:0;
border-color: transparent transparent #14CC60;
border-style: solid;
border-width: 20px;
}

.b {
  position:relative;
  margin:0 auto;
  padding:25px;
  height:auto;
  width:400px;
  background:#14CC60;
  color:#fff;
  text-align:left;
  overflow:auto;
  border-radius:8px;
  box-shadow:0px 3px 6px rgba(0,0,0,0.5);
}

h1 {
  padding:0px 10px;
}

h2 {
  font-size:18px;
  text-align:right;
}

p {
  padding:0px 10px;  
}

.wrap {
  
}

JavaScript

$(document).ready(function(){
        $('.log-btn').click(function(){
            $('.log-status').addClass('wrong-entry');
           $('.alert').fadeIn(500);
           setTimeout( "$('.alert').fadeOut(1500);",3000 );
        });
        $('.form-control').keypress(function(){
            $('.log-status').removeClass('wrong-entry');
        });

    });