JSFiddle - React, Tailwind, and code Playground

by chintsu

HTML

<a class="alert-box alert-critical" href="/">
  <div class="alert-box-header">Deals past due <i class="fa fa-arrow-right"></i></div>
  <div class="alert-box-message clearfix">
    <img class="alert-box-icon" width="54" height="54" src="http://placehold.it/54/cccccc/000000&amp;text=Image">
    You have <strong>22</strong> deals that are past due.
  </div>
</a>

CSS

.alert-box {
  display: block;
  margin-bottom: 20px;
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
    width: 300px;

   margin: 40px;
}

.alert-box,
.alert-box:hover {
  text-decoration: none;
}

.alert-box:hover {
  box-shadow: 2px 2px 1px #33B5E5, 
        -2px -2px 1px #33B5E5, 
        2px -2px 1px #33B5E5, 
        -2px 2px 1px #33B5E5,
        3px 3px 10px #83D2EF, 
        -3px -3px 10px #83D2EF, 
        3px -3px 10px #83D2EF, 
        -3px 3px 10px #83D2EF;
}

  .alert-box-header {
    padding: 0 20px 0 10px;
    line-height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    position: relative;
  }

  .alert-box .fa-arrow-right {
    position: absolute;
    top: 0;
    right: 7px;
    visibility: hidden;
    line-height: 30px;
  }

  .alert-box:hover .fa-arrow-right {
    visibility: visible;
  }

  .alert-box-message {
    padding: 10px;
  }

    .alert-box-icon {
      float: left;
      margin-right: 10px;
      width: 54px;
      height: 54px;
    }

.alert-critical.alert-box {
  border-color: #cc0000;
  background-color: #ffe5e5;
}

.clearfix:after
{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix
{
  display: inline-block;
}

* html .clearfix
{
  height: 1%;
}

/* Hides from IE-mac \*/
.clearfix
{
  display: block;
}

.alert-critical .alert-box-header {
  background-color: #cc0000;
}