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">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque a error tenetur quo expedita pariatur soluta modi mollitia. Deserunt voluptas repellendus, sint sunt voluptatem doloremque repellat iure modi eius libero!
  </p>
  
  <span class="close">&times;</span>
</div>

<div class="alert success">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque a error tenetur quo expedita pariatur soluta modi mollitia. Deserunt voluptas repellendus, sint sunt voluptatem doloremque repellat iure modi eius libero!
  </p>
  
  <span class="close">&times;</span>
</div>

<div class="alert warning">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque a error tenetur quo expedita pariatur soluta modi mollitia. Deserunt voluptas repellendus, sint sunt voluptatem doloremque repellat iure modi eius libero!
  </p>
  
  <span class="close">&times;</span>
</div>

<div class="alert error">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque a error tenetur quo expedita pariatur soluta modi mollitia. Deserunt voluptas repellendus, sint sunt voluptatem doloremque repellat iure modi eius libero!
  </p>
  
  <span class="close">&times;</span>
</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 {
  position: relative;
  min-height: 50px;
  border-radius: 4px;
  margin-bottom: 20px;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  
  > p {
    padding: 15px;
  }
  
  .close {
    background-color: rgba(255, 255, 255, .4);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }

  &.info {
    background-color: $info;
  }

  &.success {
    background-color: $success;
  }

  &.warning {
    background-color: $warning;
  }

  &.error {
    background-color: $error;
  }
}

.close {
  cursor: pointer;
  font-size: 1.4em;
}

JavaScript

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