JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
<script src="https://use.fontawesome.com/releases/v5.9.0/js/fontawesome.js"></script>
<script src="https://use.fontawesome.com/releases/v5.9.0/js/all.js"></script>
<div class="grid">
  <div class="card">
    <div class="squircle teal50">
      <i class="fas fa-cloud-sun-rain"></i>
    </div>
    <div class="header">
      Världens klimat
    </div>
  </div>
  <div class="card">
    <div class="squircle teal50">
      <i class="fas fa-praying-hands"></i>
    </div>
    <div class="header">
      Världens religioner
    </div>
  </div>
  <div class="card">
    <div class="squircle teal50">
      <i class="fas fa-globe"></i>
    </div>
    <div class="header">
      Världens länder
    </div>
  </div>
  <div class="card">
    <div class="squircle olive50">
      <i class="fas fa-glasses"></i>
    </div>
    <div class="header">
      Uppslagsverket
    </div>
  </div>
  <div class="card">
    <div class="squircle olive50">
      <i class="fas fa-chess-board"></i>
    </div>
    <div class="header">
      Korsordshjälpen
    </div>
  </div>
  <div class="card">
    <div class="squircle olive50">
      <i class="fas fa-book"></i>
    </div>
    <div class="header">
      Ordböcker
    </div>
  </div>
  <div class="card">
    <div class="squircle pink50">
      <i class="fas fa-paw"></i>
    </div>
    <div class="header">
      Junior
    </div>
  </div>
  <div class="card">
    <div class="squircle pink50">
      <i class="fas fa-play-circle"></i>
    </div>
    <div class="header">
      Play
    </div>
  </div>
  <div class="card">
    <div class="squircle pink50">
      <i class="fas fa-film"></i>
    </div>
    <div class="header">
      TigTag
    </div>
  </div>
  <div class="card">
    <div class="squircle violet50">
      <i class="fas fa-box"></i>
    </div>
    <div class="header">
      Temapaket
    </div>
  </div>
  <div class="card">
    <div class="squircle...

SCSS

.grid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5em;
  flex-wrap: wrap;
  margin: 1em;
}

.header {
  flex-grow: 1;
  font-family: sans-serif;
  margin: 1em auto 0;
  text-align: center;
  color: rgb(0, 125, 184);
  font-weight: 600;
  font-size: 0.9em;
}

.card {
  background-color: rgb(243, 245, 247);
  margin: 1em 1em 1em 0;
  border-radius: 8px;
  padding: 1.5em;
  width: 25%;
  transition: all 600ms ease-in-out;
  text-align: center;
	
  &:hover {
    transform: scale(0.95);
    .squircle {
      border-radius: 100%;
    }
  }

	& > div {
    &:not(.header) {
      margin: 0 auto;
    }

		&:not(.squircle) {
			.svg-inline--fa {
				width: 4em !important;
				height: 4em !important;
			}
		}
	}
}

.blue-bg {
  background-color: rgb(48, 174, 232);
}

.blue50 {
  color: rgb(48, 174, 232);
}

.blue75 {
  color: rgb(48, 174, 232);
}

.orange-bg {
  background-color: rgb(232, 113, 48);
}

.orange50 {
  color: rgb(232, 113, 48);
}

.orange75 {
  color: rgb(232, 113, 48);
}

.violet-bg {
  background-color: rgb(119, 94, 186);
}

.violet50 {
  color: rgb(179, 166, 217);
}

.violet75 {
  color: rgb(119, 94, 186);
}

.purple-bg {
  background-color: rgb(186, 94, 179);
}

.purple50 {
  color: rgb(217, 166, 212);
}

.purple75 {
  color: rgb(186, 94, 179);
}

.pink-bg {
  background-color: rgb(232, 48, 134);
}

.pink50 {
  color: rgb(242, 140, 188);
}

.pink75 {
  color: rgb(232, 48, 134);
}

.teal-bg {
  background-color: rgb(94, 174, 186);
}

.teal50 {
  color: rgb(166, 210, 217);
}

.teal75 {
  color: rgb(94, 174, 186);
}

.olive-bg {
  background-color: rgb(154, 186, 94);
}

.olive50 {
  color: rgb(199, 217, 166);
}

.olive75 {
  color: rgb(154, 186, 94);
}

.brown-bg {
  background-color: rgb(186, 140, 94);
}

.brown50 {
  color: rgb(217, 191, 166);
}

.brown75 {
  color: rgb(186, 140, 94);
}

.squircle {
  height: 5em;
  width: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 600ms ease-in-out;
 ...