Membuat Price Tag Dengan CSS

Membuat Price Tag Dengan CSS - Halo geng, gimana kabarnya, smoga baik ya gengs, hari ini masih heboh harbolnas nih hahaa, udah beli apa kalian ??, pastikan apa yang kalian beli adalah barang2 yang emang dibutuhkan ya gengs, jangan sampe beli barang tapi ga tau buat apaan, kan sayang banget uangnya..

Juragan juga pengen ikutan trend nih, berhubung masih hebohnya hari belanja online nasional, Juragan pengen bikin Price Tag dengan css, siapa tau kamu pngn bikin toko online, atau sekedar coba coba ningkatin skill coding kamu, tampilannya sederhana sih, tapi keren, efek tumpukan gitu, hehe. Ya sudah lah di mulai saja. ini untuk kode HTMLnya.

<div class="event">
  <span>#001</span>
  <div class="info">
    MAY 21, 2015 <br />
    Juragan Coding
  </div>
  <div class="price">
    $1,500
  </div>
</div>

setelah itu masukan style sheet nya gengs :

.event {
  font-family: 'Open Sans', sans-serif;
  width: 300px;
  height: 80px;
  background: #fff;
  border: 1px solid #CCC;
  border-radius: 2px;
  margin: 50px;
}
.event:before {
  content: '';
  display: block;
  width: 295px;
  height: 70px;
  background: #fff;
  border: 1px solid #CCC;
  border-radius: 2px; 
  transform: rotate(2deg);
  position: relative;
  top: 12px;
  left: 2px;
  z-index: -1;
}
.event:after {
  content: '';
  display: block;
  width: 295px;
  height: 75px;
  background: #fff;
  border: 1px solid #CCC;
  border-radius: 2px; 
  transform: rotate(-2deg);
  position: relative;
  top: -136px;
  z-index: -2;  
}
.event > span {
  display: block;
  width: 30px;
  background: #232323;  
  position: relative;
  top: -55px;
  left: -15px;
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  text-align: right;
}
.event > .info {
  display: inline-block;
  position: relative;
  top: -75px;
  left: 40px;
  color: #232323;
  font-weight: 600;
  line-height: 25px;
}
.event > .info:first-line {
  text-transform: uppercase;
  font-size: 10px;
  margin: 10px 0 0 0;
  font-weight: 700;
}
.event > .price {
  display: inline-block;
  width: 60px;
  position: relative;
  top: -85px;
  left: 115px; 
  color: #E35354;
  text-align: center;
  font-weight: 700;
}

Setelah jadi kira kira hasilnya sepeti ini :

Gimana gengs, mudah kan Membuat Price Tag Dengan CSS ini, udah dulu ya gengs, dadahh :D