JSFiddle - React, Tailwind, and code Playground

by notme

HTML

<p>How to get the images to be solid color <b>without changing the HTML</b>?</p>
<div id="foo">
  <div class="bar first" ><a href="#"><img src="http://developer.nvidia.com/sites/default/files/imagecache/banner_slideshow/parallel_nsight_devzone_banner.jpg"></a></div>
  <!-- semi-arbitrary number of these "bar" items -->
  <div class="bar active"><a href="#"><img src="http://developer.nvidia.com/sites/default/files/imagecache/banner_slideshow/cuda5intro_cudazone_700x240b.jpg"></a></div>
  <div class="bar"       ><a href="#"><img src="http://developer.nvidia.com/sites/default/files/imagecache/banner_slideshow/Introducingkelper700x240b.jpg"></a></div>
  <div class="bar last"  ><a href="#"><img src="http://developer.nvidia.com/sites/default/files/imagecache/banner_slideshow/Parallel_forall_banner1_0.jpg"></a></div>
</div>

CSS

#foo {
    position:absolute; top:120px; left:73px;
    width:20px; height:120px; background:#3cc;
    padding:6px 0;
}
#foo .bar { text-align:center; }
#foo .bar a { margin: auto; vertical-align:middle; text-align:center; background-color:red; width:9px; height:9px; border:1px solid #000; display:block; margin: 4px auto;}
#foo .bar.first a { background-color:blue;}
#foo .bar.last a { }
img { width:9px; height:9px; visibility:hidden; }
    
p { margin:2em; font-size:150% }