JSFiddle - React, Tailwind, and code Playground

by tylerbrownhenry

HTML

<div class="slideHolder">
<div class="slideImage" style="background-image:url(http://placehold.it/100x50);"></div>
<div class="slideTitleText">Insert your title text here!</div>
<div class="slideSubTitleText">Insert your subtitle text here!</div>
</div>

<div class="slideHolder">
<div class="slideImage" style="background-image:url(http://placehold.it/100x50);"></div>
<div class="slideTitleText">Insert your title text here!</div>
<div class="slideSubTitleText">Insert your subtitle text here!</div>
</div>

<div class="slideHolder">
<div class="slideImage" style="background-image:url(http://placehold.it/100x50);"></div>
<div class="slideTitleText">Insert your title text here!</div>
<div class="slideSubTitleText">Insert your subtitle text here!</div>
</div>

<div class="slideHolder">
<div class="slideImage" style="background-image:url(http://placehold.it/100x50);"></div>
<div class="slideTitleText">Insert your title text here!</div>
<div class="slideSubTitleText">Insert your subtitle text here!</div>
</div>


<span id="display">jkjhkjh</span>

CSS

.slideImage{
    
height:50px;
width:100px;    
background-repeat: no-repeat; 
}

#this{
    border: 2px solid blue;
}

#that{
    border: 2px solid green;
}

.img{
   width:300px; 
  height:50px;   
  background-color:red;  
  position:absolute;
    margin-left:-150px;
    margin-top: -6px;
    
}




.clip{
 height:50px;
width:200px;    
  position:relative;
overflow:hidden;  
background-color:black;    
}

.transform {
    background: blue;
    border: solid white 1px; 
    color: white;
    position: absolute;
    left: 50%;
   height: 200px;
    width: 200px;
    -webkit-transform-origin: 0% top;
    -webkit-transform: rotate(45deg);
}

/*a pseudo-element that represents the origin*/
.origigggn:before {
    left: 0%; /*change this to match the X origin*/
    top: 100%; /*change this to match the Y origin*/

    /*the rest styles the origin indicator*/    
    background: white;
    border-radius: 5px;
    content: "";
    position: absolute;
    margin: -5px 0 0 -5px;
    height: 10px;
    width: 10px;
}

JavaScript

var imgs = $('.slideImage').length;

i = 0 ;

while(i<imgs){

$('#display').text(imgs);
    
    $('.slideHolder').eq(i).wrap('<div id="this"><div id="that"></div></div>');
    
//wrap that with the approiate items
// how to give text?   

  i++ 
}