JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="xakd__col">

<div class="xakd__notification">
  <div class="xakd__product_image_box">
    <img src="" alt="" class="xakd__product_image">
  </div>
  
  <div class="xakd__text_box">
    <p class="xakd__customer_just_bought">
      <span class="xakd__customer_name">
        Pablo Escobar
      </span>
      <span class="xakd__just_bought">
        just bought:
      </span>
      </p>
    <p class="xakd__product_name">Banana Basket PX2000</p>
    <p class="xakd__when">About 8 months ago</p>
  </div>
</div>


</div>

CSS

.xakd__col,
.xakd__col:after,
.xakd__col:before,
.xakd__col *,
.xakd__col *:after,
.xakd__col *:before {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.xakd__col {
  font-size: 100%;
  font: inherit;
  font-smoothing: antialiased;
  color: inherit;
  -webkit-font-smoothing: antialiased;
}

.xakd__col {
  position: fixed;
  bottom: 2em;
  left: 2em;
}

.xakd__notification {
  background-color: #fff;
  border: 1px solid;
  padding: 1em;
  width: 300px;
  max-width: 100%;
  font-size: 14px;
  border-radius: 2px;
  display: flex;
}

.xakd {

}

.xakd__product_image_box {
  width: 60px;
}

.xakd__product_image {
  
}

.xakd__text_box {
  flex-grow: 1;
}

.xakd__customer_just_bought {
  
}

.xakd__customer_name {
  
}

.xakd__just_bought {
  
}

.xakd__product_name {
  font-size: 1.25em;
  font-weight: 900;
  margin-bottom: .4em;
}

.xakd__when {
  font-size: .8em;
}