JSFiddle - React, Tailwind, and code Playground

by mircea s

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<body>
<h2 style="margin-left:7.5em">Some DT screenshosts display</h2>
 <div id="princ">
  <span id="prm">
   <a data-fancybox="gallery" href="https://iliman.ro/imgs/dt_scrn_01.jpg"><img src="https://iliman.ro/imgs/smll/dt_scrn_01s.jpg"></a>
   <p style="margin-top:2px; margin-left:13em">Fig.1</p>
  </span>
  <span class="sg" id="l_I">   
   <a class="lft_sd" data-fancybox="gallery" href="https://iliman.ro/imgs/dt_scrn_02.jpg"><img src="https://iliman.ro/imgs/smll/dt_scrn_02s.jpg"></a>
   <a class="rght_sd" data-fancybox="gallery" href="https://iliman.ro/imgs/dt_scrn_04.jpg"><img src="https://iliman.ro/imgs/smll/dt_scrn_04s.jpg"></a>
  </span> 
   <p style="margin-top:0.4em; margin-left:6.7em">Fig.2</p> 
   <p style="margin-top:-3.8em; margin-left:19.2em">Fig. 4.1</p>
  <span class="sg" id="l_II"> 
   <a class="lft_sd" data-fancybox="gallery" href="https://iliman.ro/imgs/dt_scrn_03.jpg"><img src="https://iliman.ro/imgs/smll/dt_scrn_03s.jpg"></a> 
   <a class="rght_sd" data-fancybox="gallery" href="https://iliman.ro/imgs/dt_scrn_04_1.jpg"><img src="https://iliman.ro/imgs/smll/dt_scrn_04_1s.jpg"></a>
  </span>
  <p style="margin-top:-0.8em; margin-left:6.7em">Fig.3</p> 
  <p style="margin-top:-0.9em; margin-left:19.2em">Fig. 4.2</p>
  <span class="sg" id="l_III">
     <a id="cntr" style="margin-left:10.8em" data-fancybox="gallery" href="https://iliman.ro/imgs/dt_scrn_05.JPG"><img src="https://iliman.ro/imgs/smll/dt_scrn_05s.jpg"></a>
    </span>
    <p style="margin-top:0.6em; margin-left:12.8em">Fig.5</p> 
  </div>
</body>

CSS

#princ
{
}

#prm
{
 margin-left:9.8em;
}

#cntr
{
 margin-left:10.8em;
}

#l_I
{
 margin-top:1.3em;
}

#l_II
{
 margin-top:2.5em;
}

#l_III
{
 margin-top:-0.6em;
 margin-left:-1.1em; 
}

p
{
 position:relative;
}

.sg
{
 display:flex;
}

.lft_sd
{
 margin-left:3.6em;
}

.rght_sd
{
 margin-left:5.2em;
}