JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="shirt-wrapper red">
  <img src="https://i.stack.imgur.com/W15CG.png" alt="">
</div>

<div class="shirt-wrapper blue">
  <img src="https://i.stack.imgur.com/W15CG.png" alt="">
</div>

<div class="shirt-wrapper green">
  <img src="https://i.stack.imgur.com/W15CG.png" alt="">
</div>

<div class="shirt-wrapper rainbow">
  <img src="https://i.stack.imgur.com/W15CG.png" alt="">
</div>

<div class="shirt-wrapper image">
  <img src="https://i.stack.imgur.com/W15CG.png" alt="">
</div>

<div class="shirt-wrapper">
  <img src="https://i.stack.imgur.com/W15CG.png" alt="">
</div>

<div class="shirt-wrapper transparency-grid">
  <img src="https://i.stack.imgur.com/W15CG.png" alt="">
</div>

CSS

html { margin: 20px; }

.shirt-wrapper { display: inline-block; box-shadow: 0 0 4px rgba(0,0,0, .1), 0 0 30px rgba(0,0,0, .05); margin-left: 20px;}
.shirt-wrapper img { display: block; }

.red { background: #da1c17; animation: colorchange 25s infinite; }
@keyframes colorchange {
    0% {background: red;}
    15% {background: #1360ed;}
    30% {background: #16da24;}
    45% {background: #333;}
    60% {background: #fff;}
    75% {background: yellow;}
    90% {background: orange;}
    100% {background: red;}
}

.blue { background: #1360ed; }

.green { background: #16da24 url('https://i.stack.imgur.com/wULSS.png') no-repeat center 70px; background-size: 100px; }

.rainbow { background: linear-gradient(to bottom, #ff0000 0%,#f7ff60 20%,#68ff60 41%,#60ffe2 58%,#606eff 79%,#f960ff 100%); }

.image { background: #373C4A url('https://i.stack.imgur.com/81QWG.png') no-repeat center center; background-size: 80%; }

.transparency-grid { background: url('https://i.stack.imgur.com/0guYV.png') repeat center center; }