JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="container">
  <div class="d1"></div>
  <div class="d2"></div>
  <div class="middle-line"></div>
</div>

SCSS

.container {
  position: relative;
  background-color: #fafafa;
  margin: 50px auto;
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
}

.d1 {
  position: absolute;
  height: 100px; width: 3px;
  background-color: #000;
  left: 50%; top: 0;
  transform-origin: top;
  animation: rotate-animation 1s infinite alternate linear, height 1s infinite alternate linear;
}
.d2 {
  position: absolute;
  height: 100px; width: 3px;
  background-color: #000;
  left: 50%; bottom: 0;
  transform-origin: bottom;
  animation: rotate-animation2 1s infinite alternate linear, height 1s infinite alternate linear;
}
.middle-line {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  background-color: #000;
  height:1px;
}

@keyframes rotate-animation {
  from { transform: rotate(0deg); }
  to { transform: rotate(45deg); }
}

@keyframes rotate-animation2 {
  from { transform: rotate(0deg); }
  to { transform: rotate(-45deg); }
}


@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  }
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}
@function pi() {
  @return 3.14159265359;
}

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);
  // If the angle has 'deg' as unit, convert to radians.
  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}

@function sin($angle) {
  $sin: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
  }
  @return $sin;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) *...