JSFiddle - React, Tailwind, and code Playground

by Pasky Org

HTML

<ul> 
<li> 
<a href="#"> 
<h2>Title #1</h2> 
<p>Text Content #1</p> 
</a> 
</li> 
<li> 
<a href="#"> 
<h2>Title #2</h2> 
<p>Text Content #2</p> 
</a> 
</li> 
<li> 
<a href="#"> 
<h2>Title #3</h2> 
<p>Text Content #3</p> 
</a> 
</li>
<li> 
<a href="#"> 
<h2>Title #4</h2> 
<p>Text Content #4</p> 
</a> 
</li>
</ul>

SCSS

@import url(//fonts.googleapis.com/css?family=Reenie+Beanie:regular);

*{ 
  margin:0; 
  padding:0; 
} 
body{ 
  font-family:arial,sans-serif; 
  font-size:100%; 
  margin:3em; 
  background:#666; 
  color:#fff; 
} 
h2,p{ 
  font-size:100%; 
  font-weight:normal; 
} 
ul,li{ 
  list-style:none; 
} 
ul{ 
  overflow:hidden; 
  padding:3em; 
} 
ul li a{ 
  text-decoration:none; 
  color:#000; 
  background:#ffc; 
  display:block; 
  height:10em; 
  width:10em; 
  padding:1em; 
} 
ul li{ 
  margin:1em; 
  float:left; 
}

ul li h2{ 
  font-size:140%; 
  font-weight:bold; 
  padding-bottom:10px; 
} 
ul li p{ 
  font-family:"Reenie Beanie",arial,sans-serif; 
  font-size:180%; 
}
ul li a{ 
  text-decoration:none; 
  color:#000; 
  background:#ffc; 
  display:block; 
  height:10em; 
  width:10em; 
  padding:1em; 
  /* Firefox */ 
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1); 
  /* Safari+Chrome */ 
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); 
  /* Opera */ 
  box-shadow: 5px 5px 7px rgba(33,33,33,.7); 
}

$colors: red, orange, yellow, green, blue, purple;

@for $i from 1 through 7 {
  ul li:nth-child(#{$i}n) a {
    -webkit-transform:rotate((random(30) - random(30))+deg);
    -o-transform:rotate(-6deg); 
    -moz-transform:rotate(-6deg);
    background-color: nth($colors, random(length($colors)));
    
  }
}

/* ul li a{ 
-webkit-transform:rotate((random(30) - random(30))+deg);
-o-transform:rotate(-6deg); 
-moz-transform:rotate(-6deg); 
}
ul li:nth-child(even) a{ 
-webkit-transform:rotate((random(25) - random(25))+deg);
-o-transform:rotate(-6deg); 
-moz-transform:rotate(-6deg); 
}
ul li:nth-child(3n) a{ 
-webkit-transform:rotate((random(25) - random(25))+deg);
-o-transform:rotate(-6deg); 
-moz-transform:rotate(-6deg); 
} */