JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<!--<div class="parrent"> 
      <img class="responsive center" src="http://placekitten.com/800/600">
      <img class="responsive center" src="http://placekitten.com/400/300">
</div>-->

<div class="parrent">
  <div class="collection-pointers center"> 
      <div class="responsive center" style="width:10px;height:10px;backgound:#dadada;"></div>
  </div>
  <div class="collection-images"> <!-- rozmiar dynamiczny wedle największego rozmiaru elementu kolekcji -->
    <!-- IMAGES -->
     <img class="responsive center" src="http://placekitten.com/800/600">
     <img class="responsive center" src="http://placekitten.com/400/300">
  </div>
   
</div>

CSS

.parent{
  position: relative;
}

.responsive{
  max-width:100%;
  max-height:100%;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
}

JavaScript

//collection-pointers - rozmiar z collection-images