<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
  <div class="wrapper">
    <div class="no-data float"><i class="fa fa-caret-left fa-md arrow"></i>
      <p><i class="fa fa-warning"></i>This is a warning about something happening on this element</p>
    </div>
  </div>
body
  margin 0
  background-color #97A0BC
  padding 60px
.no-data
  background-color #fff
  color #707070
  width 225px
  height 38px
  padding 18px
  box-shadow 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
  text-rendering optimizeLegibility
  -webkit-font-smoothing antialiased
  font-size 12px
  line-height 16px
  display block
  font-family roboto
  .arrow
    position absolute
    left -8px
    top 25px
    color #fff
    font-size 2em
    z-index 5
   p
     margin-top 0
   .fa-warning
     float left
     margin-right 12px
     height 40px
     margin-top 6px
     font-size 2em
     color #CC3C15
    
.float
  animation-name float
  -webkit-animation-name float

  animation-duration 1.5s
  -webkit-animation-duration 1.5s

  animation-iteration-count infinite
  -webkit-animation-iteration-count infinite


@keyframes float {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(8%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(8%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.