JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<div class="carrier-popup"> <!-- NORMAL -->
  <div class="action-close">&times;</div>
  <div>John Doe</div>
  <div>Passport</div>
<!--   <div>
    Events log
    <ul>
      <li>Going beyond limits</li>
      <li>Returned to the territory</li>
      <li>Low battery</li>
      <li>No signal at long time</li>
      <li>No beacon</li>
      <li>Have beacon</li>
      <li>Start charging</li>
      <li>End charging</li>
    </ul>
  </div>
   -->
  <div>Battery level</div>
  <div>GSM quality</div>
  <div>Last seen at</div>
  <div class='button'>Call Action</div>
  
  <div class='carrier-popup-footer'>
    
  </div>
</div>

SCSS

:root {
  --iq-background: #39353e;
  --iq-darken: #2d2a30;
  --iq-color: #fff;
  --iq-color-secondary: hsla(0,0%,100%,0.7);
  --iq-accent: #58ac30;
  --iq-accent-text: #fff;
  --iq-success: #58ac30;
  --iq-success-text: #fff;
  --iq-error: #f44336;
  --iq-error-text: #fff;
  --iq-warning: #ff9800;
  --iq-warning-text: #fff;
  --iq-accent-secondary: #14b0f0;
  --iq-accent-secondary-text: #fff;
  --iq-divider: hsla(0,0%,49.4%,0.8);
  --iq-outline: hsla(0,0%,49.4%,0.3);
  --iq-scrollbar-width: 3px;
  --iq-scrollbar: hsla(0,0%,100%,0.01);
  --iq-scrollbar-track: hsla(0,0%,100%,0.05);
  --iq-scrollbar-thumb: hsla(0,0%,100%,0.3);
  --iq-feedback-transition: all 250ms cubic-bezier(0.1,0.1,0,1);
  --iq-ui-transition: all 250ms cubic-bezier(0.1,0.1,0,1);
  --iq-elevation-0-shadows: none;
  --iq-elevation-1-shadows: 0 0.1rem 0.3rem rgba(0,0,0,0.12),0 0.1rem 0.2rem rgba(0,0,0,0.24);
  --iq-elevation-2-shadows: 0 0.3rem 0.6rem rgba(0,0,0,0.16),0 0.3rem 0.6rem rgba(0,0,0,0.23);
  --iq-elevation-3-shadows: 0 1rem 2rem rgba(0,0,0,0.19),0 0.6rem 0.6rem rgba(0,0,0,0.23);
  --iq-elevation-4-shadows: 0 1.4rem 2.8rem rgba(0,0,0,0.25),0 1rem 1rem rgba(0,0,0,0.22);
  --iq-elevation-5-shadows: 0 1.9rem 3.8rem rgba(0,0,0,0.3),0 1.5rem 1.2rem rgba(0,0,0,0.22);
  --iq-elevation--0-shadows: none;
  --iq-elevation--1-shadows: 0 -0.1rem 0.3rem rgba(0,0,0,0.12),0 -0.1rem 0.2rem rgba(0,0,0,0.24);
  --iq-elevation--2-shadows: 0 -0.3rem 0.6rem rgba(0,0,0,0.16),0 -0.3rem 0.6rem rgba(0,0,0,0.23);
  --iq-elevation--3-shadows: 0 -1rem 2rem rgba(0,0,0,0.19),0 -0.6rem 0.6rem rgba(0,0,0,0.23);
  --iq-elevation--4-shadows: 0 -1.4rem 2.8rem rgba(0,0,0,0.25),0 -1rem 1rem rgba(0,0,0,0.22);
  --iq-elevation--5-shadows: 0 -1.9rem 3.8rem rgba(0,0,0,0.3),0 -1.5rem 1.2rem rgba(0,0,0,0.22);
  --iq-input-border: 0.2rem solid var(--iq-divider);
  --iq-input-border-radius: 0.3rem;
}

body {
  padding: 0;
  margin: 0;
  background: url('https://i.ibb.co/68LZ0D6/Screen-Shot-2020-11-20-at-16-38-34.png');
 ...