JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div id="toast-container" class="toast-top-right" aria-live="polite" role="alert">
  <div class="toast toast-info" style="display: block;">
    <div class="toast-message">
      מומלץ לעלות את הטפסים והמסמכים כבר עכשיו, גם אם אינך מתכננן כרגע להצטרף להשקעה. פעולה זו תחסוך זמן והתעסקות בשלבים מתקדמים
    </div>
    <a href="#">הבנתי</a>
  </div>
</div>
<p class="company-breif">
  <span>הגשמה</span>, חברת ההשקעות המובילה בישראל בתחום ההשקעות הישירות בנדל"ן, הינה החברה הראשונה בתחומה שמשתפת פעולה באופן מלא עם רשות ניירות ערך ומציעה למשקיעיה, השקעה באמצעות תשקיף.
</p>

<div class="company-breif">
  <h2>
	כחלק ממגוון ההגנות והבטוחות שהחברה מציעה למשקיע, מהלך זה מקנה לך
	</h2>
  <ul>
    <li>מימד נוסף של ביטחון</li>
    <li>השקעה בפרויקט אשר קיבל היתר מרשות ניירות הערך</li>
    <li>חשיפת כל פרטי ההשקעה</li>
  </ul>
</div>

<section class="tasks">
  <header class="tasks-header">
    <h2 class="tasks-title big">העלאת מסמכים להשקעה בתשקיף</h2>
  </header>
  <fieldset class="tasks-list">
    <label class="tasks-list-item">
      <input type="checkbox" name="task_1" value="0" class="tasks-list-cb" checked disabled>
      <span class="tasks-list-mark"></span>
      <span class="tasks-list-desc">צילום תעודת זהות</span>
      <div class="upload change pristine">
        <input type="file" />
        <span class="btns">שנה</span>
      </div>
      <div class="upload change pristine">
			 <a href="http://linkToDocument.pdf" target="_blank">
					<span class="btn btns">הצג</span>
				</a>

      </div>
    </label>
    <label class="tasks-list-item">
      <input type="checkbox" name="task_2" value="0" class="tasks-list-cb" disabled>
      <span class="tasks-list-mark"></span>
      <span class="tasks-list-desc">טופס בירור לעניין אישי ציבור</span>
      <div class="upload change pristine">
        <input type="file" />
        <span class="btns">העלה</span>
      </div>
    </label>
    <header class="tasks-header">
      <h2 class="tasks-title">בחר את הטופס המתאים לך</h2>
   ...

SCSS

@mixin box-sizing($val) {
  -webkit-box-sizing: $val;
  -moz-box-sizing: $val;
  box-sizing: $val;
}

@mixin user-select($val...) {
  -webkit-user-select: $val;
  -moz-user-select: $val;
  -ms-user-select: $val;
  user-select: $val;
}

@mixin box-shadow($shadows...) {
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

@function inverse-side($side) {
  @if $side==top {
    @return bottom;
  }
  @else if $side==bottom {
    @return top;
  }
  @else if $side==left {
    @return right;
  }
  @else if $side==right {
    @return left;
  }
}

@mixin linear-gradient($gradientLine, $colorStops...) {
  background-image: -webkit-linear-gradient($gradientLine, $colorStops);
  background-image: -moz-linear-gradient($gradientLine, $colorStops);
  background-image: -o-linear-gradient($gradientLine, $colorStops);
  /*@if length($gradientLine) == 2 {
  background-image:         linear-gradient(to #{inverse-side(nth($gradientLine, 1))} #{inverse-side(nth($gradientLine, 2))}, $colorStops);
  } @else {
  background-image:         linear-gradient(to #{inverse-side($gradientLine)}, $colorStops);
  }*/
}

@mixin radial-gradient($gradient...) {
  background-image: -webkit-radial-gradient($gradient);
  background-image: -moz-radial-gradient($gradient);
  background-image: -o-radial-gradient($gradient);
  background-image: radial-gradient($gradient);
}

@mixin transition($transition...) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin transition-property($properties...) {
  -webkit-transition-property: $properties;
  -moz-transition-property: $properties;
  -o-transition-property: $properties;
  transition-property: $properties;
}

@mixin transform($transform...) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  -ms-transform: $transform;
  -o-transform: $transform;
  transform: $transform;
}

@mixin clearfix {
  zoom: 1;
  &:before,
  &:after {
    content: '';
    display:...