JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="container"></div>

SCSS

$light-grey: #eee;
$primary: salmon;
$b-radius: 3px;
$spacer: 1rem;


@mixin component($block) {
  .#{$block} {
    @content;
  }
}

@mixin part($element) {
  &__#{$element} {
    @content;
  }
}

@mixin option($mod) {
  &--#{$mod} {
    @content;
  }
}

@include component(container) {
  max-width: 500px;
  margin: $spacer auto;
}

@include component(card) {
  border: 1px solid $light-grey;
  border-radius: $b-radius;
  padding: $spacer;
  
  &:not(:last-of-type) {
    margin-bottom: $spacer;
  }
 
  @include part(item) {
    color: $primary;
  }

  @include option(active) {
    background: $light-grey;
  }
}

JavaScript

const req = async () => {
	try {
    const res = await fetch('https://jsonplaceholder.typicode.com/users')
    const json = await res.json()

    const container = document.querySelector('.container')

    json.forEach(el => {
      container.insertAdjacentHTML('beforeend', `
        <div class="card ${ el.name === 'Patricia Lebsack' ? 'card--active' : ''}">
          <div class="card__item">
            ${el.name}
          </div>
        </div>
      `
      )
    })
  } catch(e) {
  	alert('fuck')
  }
}

req()