JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="cart-amount-offer">
  <p class="cart-amount-offer__title">
    Nur noch 50.00 € für kostenfreien Versand und 90.00 € für zwei gratis Proben!*
  </p>
  <div class="cart-amount-offer__progressbar-wrapper">
    <span class="cart-amount-offer__progressbar-fill" style="width: 30%"></span>
  </div>
  <div class="cart-amount-offer-subtitles">
    <span>0€</span>
    <span>50€</span>
  </div>
</div>
{{ 100 / (50 / price)  }}

{% assign progressbar_width = 0 %}

{% if price >= 50 %}
  This statement is valid.
{% endif %}

CSS

.cart-amount-offer__title {
	margin-bottom: 5px;	
	color: #666;
}

.cart-amount-offer__progressbar-wrapper {
  height: 10px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
}

.cart-amount-offer__progressbar-fill {
  display: flex;
  background: #dcc59c;
  height: 100%
}

.cart-amount-offer-subtitles {
  display: flex;
  justify-content: space-between;
  padding: 5px 5px;
  font-weight: 600;
  color: #666;
}