JSFiddle - React, Tailwind, and code Playground

by maxell4o

HTML

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<style>
  body,
  html {
    margin: 0
  }

  * {
    box-sizing: border-box
  }

  .container {
    background: #293039;
    min-height: 100vh;
    max-width: 400px;
    min-width: 320px;
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    margin: 0 auto;
    direction: rtl;
    text-align: center
  }

  .bidi {
    direction: ltr
  }

  .bold {
    font-weight: 600
  }
  
  .small {
    color: #acacac;
    font-size: 12px;
    line-height: 14px
  }

  .main {
    padding: 17px
  }

  .invoice-number {
    margin-bottom: 5px
  }

  .invoice-number span,
  .order-number span {
    display: inline-block;
    padding: 0 10px
  }

  .order-number {
    margin-bottom: 20px
  }

  .transation-info {
    background: #141b25;
    padding: 12px 17px
  }

  .transation-info+product-line,
  .transation-info+ticket-list {
    border-top: 0
  }

  .transation-info .date,
  .transation-info .name {
    margin-bottom: 14px
  }

  .payment-line,
  .total,
  product-line,
  ticket-list {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-gap: 17px;
    padding: 8px 17px;
    min-height: 60px;
    align-items: center;
    border-top: 1px solid #707070
  }

  .payment-line .amount,
  .payment-line .name,
  .total .amount,
  .total .name,
  product-line .amount,
  product-line .name,
  ticket-list .amount,
  ticket-list .name {
    text-align: start
  }

  .payment-line,
  payment-line {
    grid-template-columns: 1fr 1fr
  }

  .payment-line {
    background: #141b25
  }

  .total,
  payment-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 17px;
    padding: 8px 17px;
    min-height: 30px;
    align-items: center;
    text-align: start
  }

  payment-info {
    padding-top: 8px;
    display: block
  }

  .total {
    border: 0;
    min-height: auto
  }

 ...