JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<div class="slide">
  <div class="slide_content">
    <cm-svg-image>
      <span _ngcontent-cwy-c159="" class="novi_special"></span>
    </cm-svg-image>
    <div class="headline_header">
      <h2 class="headline_title">Προσφορά γνωριμίας* Wolt</h2>
    </div>
    <div class="headline_description">Δώρο* 15€ για τους πιο γευστικούς αγώνες του Παγκοσμίου!</div>
    <div class="headline_learnMore">Μάθε περισσότερα</div>
  </div>
</div>


<div class="slide right_pane">
  <div class="slide_content">
    <div class="headline_header">
      <h2 class="headline_title">Προσφορά* γνωριμίας</h2>
    </div>
    <div class="headline_description">15€ για παραγγελίες Wolt</div>
    <div class="terms">*Όροι και προϋποθέσεις</div>
    <!--<div class="headline_learnMore">Μάθε περισσότερα</div>-->
  </div>
</div>

<div class="offer">
  <div class="slide">
    <div class="slide_content">
      <div class="headline_header">
        <h2 class="headline_title">Προσφορά* γνωριμίας Wolt</h2>
      </div>
    </div>
  </div>
  <div class="offer_content">
    <div class="headline_description">15€ για παραγγελίες Wolt</div>
    <div class="headline_learnMore">Μάθε περισσότερα</div>
  </div>
</div>

CSS

.slide{
  width: 400px;
  height: 192px;
  border-radius: 4px;
  background: url('https://lh3.googleusercontent.com/fife/AAbDypDdA_9_2rmRoWRysvQykEKFDRp-bA_doKdvVXBsob55d9EZcCocjit55L472Bvyd8r8JoPc9vwZRKg2X1Kvvmpr8rUV-4YSc9Zqd723rAjMZN9grN_CAiUPP6wimpYbH6MNJH105yPA9PTUmx-_Bh_2OOQ27blh9cIzw_2puWHGd0fM2Y4WLnBYXZxWaPMgHzJY9FhUY_Fr9di6W9B1rl-s8-lOLQe3mjFcHmmlldY1VFesnBlrVGHifLdjaEtMtswzmoVIzChelN3rS-MZN2wPOx2kCnm0rjXeeTlsNoTEin6SCSxwFe0niM_DZ_NjB2Zaptq1Z4elTr7nlMvywV9hqQZiulqr8PgepA15nXBvq7dvylyxkhI_VyszDnMDaRLQG1FHOhcT0hLcLPNR5MvBystZKZn8DJlMrImUM_85NPxsb5IDgYxzJR5vRodgcMwWvCB5u0eKJeS-_kGeXm8QYf5Yrz3FLdpwV7ltjTEc4BFlfREDgfZBdc1vfRnQNYuqXrxDx9H-3kVSt8skadxW0OYvIBAphcw_ow4RVmENtvg2KSfkkAmQBHEEx49eHxqQgewoJgQ0zAcXCEqXAfk_pfN3_vCLz2MWR8L5o3q5bkdWZO3GY0aZNLu625NIDFN88_z1Or78pdB9owl66ZvFAZfU8MSjMZ5nOfL2Hb6eOUMFfSTl-ea5MYGR7e2Dt25KVgEAgHjpdzo0SmrBVvPbxVpZcMXN8u2Mn4qFDOpE8C5GSqZ3liBNHNKJrZYeo1yZtjhsq0UGYehhItSXj8Qw-5HPzdvXJy1vRUxaSBljbL64aA3in1vPO3tHE8stmeJyddWqCK0eJxaGMQOESVlAqbTiIBPyVwdopoXgCkB7mjn7qPNCHSaRPNc5TwwACXIFp7L6pHPfQU7r2byrxJytrP6GiRhzxnltCEJV8lt2B2l81wBjwwK0TcQMopq4ME-v22Dv7AmDDmFdXLqjP_5cgUfplD6ptssMG6OF1jkyA5UKJofJ-8Y5J8pQkJmgDLGHVmaxCr_dGdI4b3Plg0JZWmfRiUCkifVgwwMU-sJYImVR2lVCur8UVywN1lhH8g5UA2ar-YwOrWi46DWOltZ-864g3_psUem-VylVhK1ZQiRazaatL9-gPsIm7U8vG9ZdMlu4CjqCgqFy3ozmVQvQ4aEPZGtTwg8fndSYTmZBW4jubOauX1_3eVnTALGsJyYvRPuJgJ-UyqbFXkp3nDhYQfZ7rJ1zPaH83soZndhSFh4E4_-g9nwbw-d36o7HUCtUHqYfVtdKY01n5TPAUPy1kxV_9D6sg_cJdhQEebKfExmCvAAdeJSPF3Rh7nenErxYlRTThgIEDRnjeV1n8DdNmgZWWQWZ1J-3vabSHHWVXzMN5ZsUSFRngYimYrqEjHqc5oHsc5MRlxaogs7YHV-lqrmq8OIyOg_TdSOPHGzZ8uMZ06KzEi6MDaW_Forb_vadFDdhFXi381LkxXk=w1920-h995');
  background-size: cover;
  background-position: right center;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  font-family: Open Sans;
  font-weight: 400;
  display: flex;
  align-items: end;
  margin-bottom: 16px;
}
.headline_title{
  font-size: 18px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 4px;
}
.headline_description{
  font-size:...