JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class="color-group">
   <div class="red"></div>
   <div class="red-hover"></div>
   <div class="red-hover2"></div>
</div>

<div class="color-group">
   <div class="green"></div>
   <div class="green-hover"></div>
   <div class="green-hover2"></div>
</div>

<div class="color-group">
   <div class="blue"></div>
   <div class="blue-hover"></div>
   <div class="blue-hover2"></div>
</div>

<div class="color-group">
   <div class="cyan"></div>
   <div class="cyan-hover"></div>
   <div class="cyan-hover2"></div>
</div>

<div class="color-group">
   <div class="pink"></div>
   <div class="pink-hover"></div>
   <div class="pink-hover2"></div>
</div>

<div class="color-group">
   <div class="magenta"></div>
   <div class="magenta-hover"></div>
   <div class="magenta-hover2"></div>
</div>

<div class="color-group">
   <div class="brown"></div>
   <div class="brown-hover"></div>
   <div class="brown-hover2"></div>
</div>

<div class="color-group">
   <div class="orange"></div>
   <div class="orange-hover"></div>
   <div class="orange-hover2"></div>
</div>

<div class="color-group">
   <div class="yellow"></div>
   <div class="yellow-hover"></div>
   <div class="yellow-hover2"></div>
</div>

<div class="color-group">
   <div class="gray"></div>
   <div class="gray-hover"></div>
   <div class="gray-hover2"></div>
</div>

CSS

.color-group {
    display: flex;

}
.color-group > div {
  align-items: center;
  margin-bottom: 12px;
  width: 150px;
  height: 50px;
}



.red { background-color: #FFEBEB; }
.red-hover { background-color: #FFE3E3; }
.red-hover2 { background-color: #ffe1e1; }


.green { background-color: #E7F7E5; }
.green-hover { background-color: #DCF3D9; }
.green-hover2 { background-color: #e0f5dd; }

.blue { background-color: #E8F2FF; }
.blue-hover { background-color: #E0EDFF; }
.blue-hover2 { background-color: #deecff; }

.cyan { background-color: #E4FCFA; }
.cyan-hover { background-color: #D9FBF8; }
.cyan-hover2 { background-color: #dbfbf8; }


.pink { background-color: #FDF0FB;}
.pink-hover { background-color: #FCEAF9; }
.pink-hover2 { background-color: #fce7f9; }

.magenta { background-color: #F8EDF9; }
.magenta-hover { background-color: #F5E5F6; }
.magenta-hover2 { background-color: #f5e5f6; }

.brown { background-color: #F4EFE8; }
.brown-hover { background-color: #F0E9DF; }
.brown-hover2 { background-color: #f1eae1; }

.orange { background-color: #FEF6EA; }
.orange-hover { background-color: #FCF1E0; }
.orange-hover2 { background-color: #fef2e0; }

.yellow { background-color: #F9F9EC; }
.yellow-hover { background-color: #F7F7E5; }
.yellow-hover2 { background-color: #f7f7e4; }


.gray { background-color: #F5F5F5; }
.gray-hover { background-color: #EFEFEF; }
.gray-hover2 { background-color: #f0f0f0; }