JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="content">
      <div class="grid">
        <div class="grid__col grid__col--1-of-4 grid__col--push-1-of-8">
          <a href="#" class="button frosted"><div>Button</div></a>
        </div>
        <div class="grid__col grid__col--1-of-4 grid__col--push-1-of-4">
          <a href="#" class="button frosted"><div>Button</div></a>
        </div>
      </div>
    </div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="5" />
  </filter>
</svg>

CSS

@charset "UTF-8";
/*-----------------------------------*\

  $TOAST-GRID

  An insane grid.
  You'd be mad to use it.

  Usage
  =====

  Assuming default values:

  <div class="grid">
    <div class="grid__col grid__col--1-of-2">
      A half-width column.
    </div>
    <div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
      A quarter, pulled left by its own width. You get this, right?
    </div>
  </div>


  Customisation
  =============

  $grid-namespace and $grid-column-namespace
  adjusts the class names for the grid. With
  default values, grid wrappers have a class
  of '.grid' and columns '.grid__col'.

  $col-groups(n) adjusts column divisions.
  For example, $col-groups(12) will produce
  a 12-column grid. $col-groups(3,6,8)
  will produce a 3-, 6-, and 8-column grid.

  $gutter-width is—you guessed it—the gutter
  width. Accepts any unit.

  That's it. Have fun.

\*-----------------------------------*/
/* line 60, ../sass/_grid.scss */
.grid {
  list-style: none;
  margin-left: 0px; }
  /* line 64, ../sass/_grid.scss */
  .grid > .grid__col--2-of-2, .grid > .grid__col--4-of-4, .grid > .grid__col--8-of-8 {
    width: 100%; }
  /* line 66, ../sass/_grid.scss */
  .grid > .grid__col--1-of-2, .grid > .grid__col--2-of-4, .grid > .grid__col--4-of-8 {
    width: 50%; }
  /* line 71, ../sass/_grid.scss */
  .grid > .grid__col--1-of-4, .grid > .grid__col--2-of-8 {
    width: 25%; }
  /* line 73, ../sass/_grid.scss */
  .grid > .grid__col--3-of-4, .grid > .grid__col--6-of-8 {
    width: 75%; }
  /* line 75, ../sass/_grid.scss */
  .grid > .grid__col--push-2-of-2, .grid > .grid__col--push-4-of-4, .grid > .grid__col--push-8-of-8 {
    margin-left: 100%; }
  /* line 77, ../sass/_grid.scss */
  .grid > .grid__col--push-1-of-2, .grid > .grid__col--push-2-of-4, .grid > .grid__col--push-4-of-8 {
    margin-left: 50%; }
  /* line 82, ../sass/_grid.scss */
  .grid > .grid__col--push-1-of-4, .grid > .grid__col--push-2-of-8 {
    margin-left: 25%; }
  /*...

JavaScript

jQuery(function($) {
	"use strict";

	$(".button.frosted").each(function(index) {
		var $this = $(this),
	        $parentWithBackground;
	    
	    $parentWithBackground = $this.parents().filter(function() {
	        return $(this).css('background-image') !== 'none'
	    });
	    
	    $(this).css({
	        "background-image": $parentWithBackground.css("background-image"),
	        "background-repeat": $parentWithBackground.css("background-repeat"),
	        "background-size": $parentWithBackground.css("background-size"),
	        "background-position": $parentWithBackground.css("background-position"),
	        "background-attachment": $parentWithBackground.css("background-attachment"),

	    });
	});
});