JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul class="starbursts">
	<li>
		<a href="#" class="starburst1"><span><br>ZORNET.RU<br>CSS<br>uCoz-сайт</span></a>
	</li>
	<li>
		<a href="#" class="starburst2"><span><span><span><br>ZORNET.RU<br>CSS<br>uCoz</span></span></span></a>
	</li>
	<li>
		<a href="#" class="starburst3"><span><span><span><span><span><span><span><span><br>ZORNET.RU<br>CSS3<br>uCoz-сайт</span></span></span></span></span></span></span></span></a>
	</li>
	<li>
		<a href="#" class="starburst4"><span><span><span><span><br>ZORNET.RU<br>CSS3<br>uCoz-сайт</span></span></span></span></a>
	</li>
	<li>
		<a href="#" class="starburst5"><span><span><span><span><span><span><span><br>NEW<br>CSS3<br>uCoz-сайт</span></span></span></span></span></span></span></a>
	</li>
	<li>
		<a href="#" class="starburst6"><span><span><span><span>ZORNET.RU<br>Starbursts!</span></span></span></span></a>
	</li>
	<li>
		<a href="#" class="starburst7"><span><span><span><span><span><span><span><span><span><span><span><span><span><span><span><span>ZORNET.RU<br>uCoz-сайт</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></a>
	</li>
</ul>

CSS

ul.starbursts {
	list-style:none;
	margin:20px 0;
	padding:0;
	overflow:hidden;
}
ul.starbursts li {
	float:left;
	width:10em;
	height:10em;
	position:relative;
}
ul.starbursts * {
	margin:0;
	padding:0;
	line-height:1.2em;
}

/* Starburst 1 */
.starburst1 {
	display:block;
	width:6em;
	height:6em;
	background:#ff47ab;
	-webkit-transform:rotate(-22.5deg);
	-moz-transform:rotate(-22.5deg);
	rotation:-22.5deg;
	position:absolute;
	top:2em;
	left:2em;
	text-align:center;
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	font-family:Arial, sans-serif;
	text-shadow:0 0 3em #f00, 0 0 4px #88004a;
	-moz-transition: -moz-transform 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s ease;
	-o-transition: -o-transform 0.3s ease;
	transition: transform 0.3s ease;
}
.starburst1 span {
	display:block;
	width:6em;
	height:6em;
	background:#ff47ab;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	rotation:45deg;
}
.starburst1:hover,
.starburst1:hover span {
	background:#f00;
	color:#fff;
	text-shadow:0 0 20px #fff, 0 0 8px #fff;
}
.starburst1:hover {
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	rotation:-405deg;
}

/* Starburst 2 */
.starburst2 {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	rotation:-45deg;
	position:relative;
	top:2em;
	left:2em;
	text-align:center;
	text-decoration:none;
	color:#000;
	font-weight:bold;
	font-family:Arial, sans-serif;
	text-shadow:0 0 3em #f00, 0 0 4px #f30;
	-moz-transition: -moz-transform 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
}
.starburst2 span {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(22.5deg);
	-moz-transform:rotate(22.5deg);
	rotation:22.5deg;
}
.starburst2:hover,
.starburst2:hover span {
	background:#fa0;
	color:#fff;
	text-shadow:0 0 20px #fff, 0 0 8px #fff;
}
.starburst2:hover...