JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.1.0/css/line-awesome.min.css">
<header class="header">

  <div class="logo">
    <img src="https://image.flaticon.com/icons/svg/58/58270.svg">
    <h1>Frallappen</h1>
  </div>

  <button class="menu-btn menu-btn--open">
    <i class="la la-user"></i>
  </button>


</header>

<main class="main">
  <h2>Lägg beställning för vecka 32</h2>
    <hr>
  <div class="checkboxes">
    <ul>
      <li>
        <div class="checkbox disabled">
          <div class="checkbox-number"></div>
          <div class="checkbox-text">Måndag</div>
        </div>
      </li>
      <li>
        <div class="checkbox" data-date="2019-11-14">
          <div class="checkbox-number"></div>
          <div class="checkbox-text">Tisdag</div>
        </div>
      </li>
      <li>
        <div class="checkbox">
          <div class="checkbox-number"></div>
          <div class="checkbox-text">Onsdag</div>
        </div>
      </li>
      <li>
        <div class="checkbox">
          <div class="checkbox-number"></div>
          <div class="checkbox-text">Torsdag</div>
        </div>
      </li>
      <li>
        <div class="checkbox">
          <div class="checkbox-number"></div>
          <div class="checkbox-text">Fredag</div>
        </div>
      </li>

    </ul>

    <button class="primary-btn btn-small" id="removeAll">Rensa allt</button>
  </div>

  <button class="primary-btn" id="add">Beställ</button>
  <hr>
  
  <h2>Label</h2>
  <div class="orders">
    <ul>
      <li class="order">
        <div class="order-date"><i class="la la-calendar"></i>2019-11-14</div>
        <div class="order-quantity"><i class="la la-bread-slice"></i>1</div>
        <button><i class="la la-trash"></i></button>
      </li>

      <li class="order">
        <div class="order-date"><i class="la la-calendar"></i>2019-11-14</div>
        <div class="order-quantity"><i class="la la-bread-slice"></i>1</div>
       ...

SCSS

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina|Nunito:400,700,900&display=swap');

/* Base */
body,
body * {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  text-align: center;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  text-transform: uppercase;
  
  &.menu-is-open {
    overflow: hidden;
  }
}

hr {
  margin: 20px 0;
  padding: 0;
  height: 1px;
  width: 100%;
  display: block;
  background: #000;
}

h2 {
  font-size: 18px;
  margin: 0;
  margin-bottom: 10px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Icons */
.la {
  font-size: 30px;
}

/* Buttons */
button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  outline: 0;
  font-size: 16px;

  &.primary-btn {
    background: #eee;
    padding: 10px 15px;
    border-radius: 50px;
    font-weight: bold;
  }
  
  &.btn-small {
    font-size: 12px;
  }

  &.disabled {
    opacity: 0.4;
    pointer-events: none;
  }
}



/* Header */
.header {
  display: flex;
  position: relative;
  padding: 10px 0;
  margin-bottom: 20px;

  /* logo */
  .logo {
    font-family: 'Baloo Bhaina', cursive;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    padding: 5px;

    img {
      height: 30px;
    }
    h1 {
      font-size: 16px;
      margin: 0;
      height: auto;
      line-height: 18px;
      margin-top: 5px;
    }
  }


  .menu-btn {
    position: absolute;
    right: 15px;
    top: 15px;
    background: #eee;
    padding: 5px;
  }

}

/* Checkboxes */
.checkboxes {
  text-align: center;

  ul {
    display: flex;
    justify-content: center;

    li {
      display: flex;
      justify-content: center;

      .checkbox {
        display: flex;
        flex-direction: column;
     ...

JavaScript

/* Menu */
$('.menu-btn--open').click(function() {
  $('.menu').addClass('is-open');
  $('body').addClass('menu-is-open');
});
$('.menu-btn--close').click(function() {
  $('.menu').removeClass('is-open');
  $('body').removeClass('menu-is-open');
});

/* LÄGG TILL 1 AUTO TILL KOMMANDE DAG */
$('.checkbox[data-date="2019-11-14"]').addClass('checked').find('.checkbox-number').text(1);

/* LÄGG TILL */
var number = 0;
$('.checkbox').click(function() {
  var number = $(this).find('.checkbox-number').text();
  number++;
  $(this).addClass('checked').find('.checkbox-number').text(number);
});

/* TA BORT */
$('#removeAll').click(function() {
	var number = 0;
  $('.checkbox').removeClass('checked');
  $('.checkbox-number').text('');  
});


/* BYT TEMA */
$('.theme-option').click(function() {
	$(this).addClass('active').siblings().removeClass('active');
  var theme = $(this).attr('id');
  
});