JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Chickens do not have an Agouti locus. They do have Extension though, which controls the distribution of black, among other things.
<br>E/E causes entirely black feathering (called Extended Black). We'll treat it the same as a black horse.<br>

<table class='full'>
    <tr><td>
        <div class='coat_holder'>
        <img src='http://mythstable.epizy.com/chicken/horse/line.png'>
        <img src='http://mythstable.epizy.com/chicken/horse/pattern-hair.png' class='chorse_bay'>
        <img src='http://mythstable.epizy.com/chicken/horse/ground.png' class='chorse_chestnut'>
    </div>        <br><b>No E</b>
    </td><td>
    <div class='coat_holder'>
        <img src='http://mythstable.epizy.com/chicken/horse/line.png'>
        <img src='http://mythstable.epizy.com/chicken/horse/pattern-points.png' class='chorse_black'>
        <img src='http://mythstable.epizy.com/chicken/horse/ground.png' class='chorse_black'>
    </div>        <br><b>Extended Black</b>
    </td><td>
    <div class='coat_holder'><img src='http://mythstable.epizy.com/chicken/horse/line.png'>
        <img src='http://mythstable.epizy.com/chicken/horse/pattern-hair.png' class='chorse_bay'>
        <img src='http://mythstable.epizy.com/chicken/horse/ground.png' class='chorse_chestnut'>
    </div>
    </td></tr>
</table>

CSS

.half {text-align: center;}
  .full {width: 100%;}
  .flex {display: flex; justify-content: space-between;}


  .coat_holder {width: 300px; height: 280px; max-width: 100%; max-height: auto; position: relative;}
  .coat_holder img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

  /* horse */
  .chorse_black {filter: invert(10%);}
  .chorse_bay {filter: invert(39%) sepia(68%) saturate(5620%) hue-rotate(29deg) brightness(91%) contrast(101%);}
  .chorse_chestnut {filter: invert(51%) sepia(77%) saturate(5495%) hue-rotate(21deg) brightness(99%) contrast(101%);}