JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<div class="learnosity-activity-app-wrapper">
  <div class="learnosity-items-app">
    <div class="learnosity-assess-app">
      <div class="lrn lrn-assess">
        <div class="lrn-region-group lrn-group-top">
          <div class="ui equal width grid">
            <div class="column">
              <div class="lrn-region lrn-top-left-region">
                <div class="test_title_element">
                  <div class="test-title-text ui medium header" title="Test headline">Headline</div>
                  <div class="subtitle ui small grey header" title="Test subtitle">Subtitle</div>
                </div>
              </div>
            </div>
            <div class="column">
              <div class="lrn-region lrn-top-right-region">
                <div class="item-count pos-left"><span class="current-item-pos ui basic label" title="Test">
    1 av 1</span></div>
                <button type="button" class="lrn_btn assess-dropdown-menu ui button"><i class="list icon"></i></button>
              </div>
            </div>
          </div>

          <div class="ui small progress success">
            <div class="bar">
              <div class="progress"></div>
            </div>
          </div>
        </div>
        <div class="lrn-region-group lrn-group-middle">
          <div class="lrn_question">
            <div class="ui header">
              Question 1
            </div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod, justo ut egestas pharetra, erat orci maximus ante, quis hendrerit metus est et lectus.
            </p>
            <form>
              <div class="ui list">
                <li class="item">
                  <div class="ui radio checkbox">
                    <input type="radio" name="radio">
                   ...

SCSS

/* START BASIC STYLING */

body {
  background-color: #fafafa !important;
  margin-top: 20px;
}

.learnosity-items-app {
  .learnosity-assess-app {
    box-shadow: inset 0 0 2px #d4dce2;
    width: 600px;
    margin: 0 auto;
    .lrn.lrn-assess {
      margin: 0;
      min-height: 300px;
      background-color: transparent;
    }
    .lrn-group-top {
      padding-bottom: 10px;
      .ui.header {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
      }
			.ui.basic.label {
				border: 0;
				background-color: transparent;
    	}
    }
    .lrn-group-top,
    .lrn-group-bottom {
      padding: 10px 15px;
      background-color: rgba(255, 255, 255, 0.5);
      min-height: 82px;
    }
    .lrn-group-middle {
      min-height: 150px;
      background-color: white;
      padding: 15px;
    }
    .lrn-group-bottom,
    .lrn-top-right-region,
    .lrn-top-left-region {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .lrn-group-bottom {
      justify-content: space-between;
    }
    .lrn-top-right-region {
      justify-content: flex-end;
    }
    .item-count {
      margin-right: 10px;
    }
    .item-prev,
    .assess-dropdown-menu {
      &.ui.button {
        padding: 0.78571429em !important;
        .icon {
          margin-right: 0;
        }
      }
    }
    .lrn_question+.lrn_question {
      margin-top: 3em;
    }
    .ui.progress {
      margin-top: 10px;
      margin-bottom: 0;
    }
  }
  .sr-only {
    display: none;
  }
}

/* END BASIC STYLING */

.learnosity-items-app {
	.ui.button {
		&.yellow{
			background-color: #f0a800;
		}
		.ui.basic.label {
			&.yellow{
				color: #f0a800 !important;
				border-color: #f0a800 !important;
			}
		}
		&.validate {
			float: right;
			clear: right;
		}
	}

	.ui.message {
		&.hint {
			&.yellow {
				
			}
			border: 0;
			border-radius: 0;
			box-shadow: none;
			color: rgba(0, 0, 0, 0.87);

			.ui.header {
				color: rgba(0, 0, 0,...

JavaScript

var initItems = 3;
var initHint = 0
var items = initItems;
var currentHint = initHint;
var hintShow = $('.button[data-hint-show]');
var hintClose = $('.button[data-hint-close]');
var btnItemLabel = hintShow.find('.item-label');
btnItemLabel.text('Show hint');

hintShow.click(function() {
	var number = $(this).data('hint-show');
	hintShow = $(this);
	btnItemLabel = hintShow.find('.item-label');
  if (items === 1) {
    $(this).hide();
    $('.button[data-hint-close=' + number + ']').show();
  }
  if (items >= 1) {
		var previousHint = currentHint;
    items--;
    currentHint++;
		$('.message[data-hint-question=' + number +'][data-hint-slide=' + previousHint + ']').removeClass('visible').addClass('hidden').hide();
		$('.message[data-hint-question=' + number +'][data-hint-slide=' + currentHint + ']').transition('slide down');
  }
  if (items >= 2) {
		$(this).find('.count-label').show();
		btnItemLabel.text('Next hint');
  }
});
hintClose.click(function() {
	var number = $(this).data('hint-close');
  $('.message[data-hint-question=' + number + '][data-hint-slide=' + currentHint + ']').transition('slide down');
  items = initItems;
  currentHint = initHint;
  $(this).hide();
	btnItemLabel.text('Show hint');
  hintShow.show();
	hintShow.find('.count-label').hide();
});