JSFiddle - React, Tailwind, and code Playground

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;
    display:table
}
#foo .bar { display:table-row }
#foo .bar a {display: block; vertical-align:middle; text-align:center; width:9px; height:9px; border:1px solid #000; margin-top: 6px; margin-left: 4px; background: green }
img { display: none; }

p { margin:2em; font-size:150% }