JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<div class="theme shown">
  <div class="theme__item theme-light" data-theme="theme-light" title="Light"></div>
  <div class="theme__item theme-medium" data-theme="theme-medium" title="Medium"></div>
  <div class="theme__item theme-dark" data-theme="theme-dark" title="Dark"></div>
</div>



<div class="layout ">
	<div class="page">
		<div class="page__container">
			<div class="page__content">
				<div class="content">
					<section class="centered centered--narrow">
						<h2>Normal buttons</h2>
						<button class="btn">Default</button>
						<button class="btn btn-dark">Dark</button>
						<button class="btn btn-light">Light</button>
						<button class="btn btn-primary">Primary</button>
						<button class="btn btn-secondary">Secondary</button>
						<button class="btn btn-green">Green</button>
						<button class="btn btn-blue">Blue</button>
						<button class="btn btn-flamingo">Flamingo</button>
												
						<h2>Rounded buttons</h2>
						<button class="btn btn--rounded">Default</button>
						<button class="btn btn--rounded btn-dark">Dark</button>
						<button class="btn btn--rounded btn-light">Light</button>
						<button class="btn btn--rounded btn-primary">Primary</button>
						<button class="btn btn--rounded btn-secondary">Secondary</button>
						<button class="btn btn--rounded btn-green">Green</button>
						<button class="btn btn--rounded btn-blue">Blue</button>
						<button class="btn btn--rounded btn-flamingo">Flamingo</button>
						
						<h2>Outline buttons</h2>
						<button class="btn btn--outline">Default</button>
						<button class="btn btn--outline btn-dark">Dark</button>
						<button class="btn btn--outline btn-light">Light</button>
						<button class="btn btn--outline btn-primary">Primary</button>
						<button class="btn btn--outline btn-secondary">Secondary</button>
						<button class="btn btn--outline btn-green">Green</button>
						<button class="btn btn--outline btn-blue">Blue</button>
						<button class="btn...

SCSS

$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 750px,
	lg: 992px,
	xlg: 1200px
) !default;

@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
	$n: index($breakpoint-names, $name);
	@return if(
		$n != null and $n < length($breakpoint-names),
		nth($breakpoint-names, $n + 1),
		null
		);
}

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
	$min: map-get($breakpoints, $name);
	@return if($min != 0, $min, null);
}
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
	$next: breakpoint-next($name, $breakpoints);
	@return if($next, breakpoint-min($next, $breakpoints) - 0.02, null);
}

@mixin MQ-min($name, $breakpoints: $grid-breakpoints) {
	$min: breakpoint-min($name, $breakpoints);
	@if $min {
		@media (min-width: $min) {
			@content;
		}
	} @else {
		@content;
	}
}
@mixin MQ-max($name, $breakpoints: $grid-breakpoints) {
	$max: breakpoint-max($name, $breakpoints);
	@if $max {
		@media (max-width: $max) {
			@content;
		}
	} @else {
		@content;
	}
}
@mixin MQ-between($lower, $upper, $breakpoints: $grid-breakpoints) {
	$min: breakpoint-min($lower, $breakpoints);
	$max: breakpoint-max($upper, $breakpoints);

	@if $min != null and $max != null {
		@media (min-width: $min) and (max-width: $max) {
			@content;
		}
	} @else if $max == null {
		@include MQ-min($lower, $breakpoints) {
			@content;
		}
	} @else if $min == null {
		@include MQ-max($upper, $breakpoints) {
			@content;
		}
	}
}


// Grid system
$row-columns:      12 !default;
$row-gutter-width: 1.5rem !default;

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
	@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
} 

@mixin make-cssgrid($columns: $row-columns, $breakpoints: $grid-breakpoints) {
	@each $breakpoint in map-keys($breakpoints) {
		$infix: breakpoint-infix($breakpoint, $breakpoints); 

		@include MQ-min($breakpoint, $breakpoints) {
			@if $columns > 0 {
				@for $i from 1...

JavaScript

(function ($, document, Math) {

    $.ripple = function (selector, options) {
        "use strict";

        var self = this;

        var _log = (self.log = function () {
            if (self.defaults.debug && console && console.log) {
                console.log.apply(console, arguments);
            }
        });

        self.selector = selector;
        self.defaults = {
            debug: false,
            on: "mousedown",

            opacity: 0.4,
            color: "auto",
            multi: false,

            duration: 0.7,
            rate: function (pxPerSecond) {
                return pxPerSecond;
            },

            easing: "linear"
        };

        self.defaults = $.extend({}, self.defaults, options);

        var Trigger = function (e) {
            var $this = $(this);
            var $ripple;
            var settings;

            $this.addClass("has-ripple");

            // This instances settings
            settings = $.extend({}, self.defaults, $this.data());

            // Create the ripple element
            if (
                settings.multi ||
                (!settings.multi && $this.find(".ripple").length === 0)
            ) {
                $ripple = $("<span></span>").addClass("ripple");
                $ripple.appendTo($this);

                _log("Create: Ripple");

                // Set ripple size
                if (!$ripple.height() && !$ripple.width()) {
                    var size = Math.max(
                        $this.outerWidth(),
                        $this.outerHeight()
                    );
                    $ripple.css({
                        height: size,
                        width: size
                    });
                    _log("Set: Ripple size");
                }

                // Give the user the ability to change the rate of the animation
                // based on element width
                if (settings.rate && typeof settings.rate == "function") {
             ...