JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="ticket">
  
  <div class="illustration">
    <div class="spikes">
      <div class="spike"></div>
      <div class="spike"></div>
      <div class="spike"></div>
      <div class="spike"></div>
      <div class="spike"></div>
      <div class="spike"></div>
      <div class="spike"></div>
      <div class="spike"></div>
      <div class="spike"></div>
    </div>
    <div class="new-label">BARU</div>
<!--     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.42 145" class="spikes"><g data-name="Layer 2"><path fill="#fbad18" fill-rule="evenodd" d="M.33 0H0v145h.33l7.09-6.59-7.09-6.59 7.09-6.59-7.09-6.59 7.09-6.59-7.09-6.6 7.09-6.59-7.09-6.59 7.09-6.59-7.09-6.59 7.09-6.59-7.09-6.59 7.09-6.59-7.09-6.59 7.09-6.59-7.09-6.59 7.09-6.6-7.09-6.59 7.09-6.59-7.09-6.59 7.09-6.59L.33 0z" data-name="Layer 1"/></g></svg> -->
  </div>

  <div class="ornament">
    <div class="ornament__sharp"></div>
    <div class="ornament__cut ornament__cut--1"></div>
    <div class="ornament__cut ornament__cut--2"></div>
    <div class="ornament__tail"></div>
    <div class="content">
      <p>
        Selamat! Anda Dapat<br>
        Disc. 20% untuk<br>
        Transaksi Pertama Anda.
      </p>
      <a href="#" class="link-join">
        Bergabung Sekarang
      </a>
    </div>
  </div>
  
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
body {
  margin: 0;
  padding: 0;
  background: #e0e0e0;
  height: 100vh;
  font-family: 'Noto Sans';
}
.ticket {
  width: 380px;
  height: 160px;
  transition: all 0.4s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ornament {
  background: #fbad18;
  width: 65%;
  height: inherit;
  position: absolute;
  border: 1px solid #ffa726;
  border-right: none;
  transition: all 0.4s ease;
  z-index: 1;
}
.ornament__cut {
  background: #e0e0e0;
  width: 22px;
  height: 12.1px;
  position: absolute;
  left: 10%;
  z-index: 5;
}
.ornament__cut--1 {
  top: -1%;
  border-radius: 0 0 100px 100px;
}
.ornament__cut--2 {
  bottom: -1%;
  border-radius: 100px 100px 0 0;
}
.ornament__tail {
  background: #f57c00;
  width: 12px;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
}
.illustration {
  background: white;
  width: 35%;
  height: inherit;
  position: absolute;
  right: 0;
  transition: all 0.4s ease;
  border: 1px inset rgba(0, 0, 0, 0.08);
  border-left: none;
  border-radius: 0 4px 4px 0;
  overflow: hidden;
}
.new-label {
  background: #ffa726;
  width: 50px;
  text-align: center;
  padding: 0.2em;
  border-radius: 8px;
  position: absolute;
  top: 2%;
  right: 2%;
  color: white;
  font-size: 13px;
}
.spikes {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  margin-left: -12px;
}
.spike {
  background: #ffa726;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}
.content {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}
.content p {
  font-size: 16px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
}
.content .link-join {
  background: white;
  border-radius: 4px;
  padding: 0.3em 1em;
  font-size: 12px;
  font-weight: bold;
  color: #ffa726;
 ...