JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="alert info">
  <div class="head">
    Short Title
    <span class="close">&times;</span>
  </div>

  <div class="body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem rem sapiente laborum iure illum et temporibus inventore fugit eius totam tempore architecto perferendis debitis, ea nesciunt libero modi eum itaque.
  </div>
</div>

<div class="alert info">
  <div class="head">
    Short Title
    <span class="close">&times;</span>
  </div>

  <div class="body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem rem sapiente laborum iure illum et temporibus inventore fugit eius totam tempore architecto perferendis debitis, ea nesciunt libero modi eum itaque.
  </div>
</div>

SCSS

$white: #ffffff;
$black: #000000;
$dark-gray: #323232;
$medium-gray: #888888;
$light-gray: #bbbbbb;

$info: #007bff;
$success: #28a745;
$warning: #ffc107;
$error: #dc3545;

// Google Font
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

// Base
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  margin: 40px auto;
  max-width: 400px;
}

.alert {
  border-radius: 4px;
  margin-bottom: 15px;
  
  &.info {
    border: 1px solid $info;
    
    .head {
      background-color: $info;
      color: #fff;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
  }

  .head {
    display: flex;
    padding: 6px 10px;
    font-weight: 600;
    
    .close {
      cursor: pointer;
      margin-left: auto;
      font-weight: 700;
    }
  }
  
  .body {
    background-color: #fafafa;
    padding: 10px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }
}

JavaScript

$(function () {
  $('.alert .close').on('click', function () {
  	$(this).closest('.alert').fadeOut(320);
  });
});